Darkmode toggle animation - Max van IJsselmuiden

Lottie animation: darkmode toggle

August 25, 2025 by

Max van IJsselmuiden

I love spending unnecessary amounts of time on finicky details.

Type

Lottie Animation

Tools

Adobe Illustrator, Adobe After Effects, Bodymovin, Lottie, React

This little animation was the toggle button for the switch between dark and light mode in my previous portfolio which I had built using static page builder Gatsby. I’ve always loved this little animation, and since I’ve spend so much time on it, it deserves a spot right here.

Hope you enjoy it as much as I do.

If you want to use it on your website, feel free to do so. You have my permission. The animation JSON can be downloaded, and I’m sure that you’ll manage to get it working after reading the Lottie docs.

Download Lottie JSON

Example code

The play direction determines to move towards the light or dark mode. The APIs function names might change over time, make sure to use the ones that match the version of Lottie you’re using.

Did you like this post?

Want to stay tuned?