Emil Kowalski helps decide when and how to animate to provide a better user experience, starting with ensuring your animations have a purpose. I finished Emil’s course Animations on the Web this summer and highly recommend following his writing on motion and animation.

Motion designer Thibaut Crépelle reimagined the launch of the iconic iMac G3 with an animated video and an interactive page made in Framer. Really fun passion project executed with high quality and attention to detail.

My first Mac was a Mini G4 introduced in 2005, but soon after, I also got an iMac G3 because of its cool look. Watching this reel made me want to get another one again.

Unicorn Studio makes creating WebGL effects, motion, and interactivity easy for designers. Later, they can be embedded in Framer, Webflow, or any website.

I purchased Emil Kowalski​’s course on animation back in April, but started working through it only last week. Emil is a design engineer at Linear and previously worked at Vercel. The course is fairly technical and requires an understanding of CSS, JS, and React, but it does a really good job introducing Motion and explaining what separates good animations from great. It’s been very helpful as I’m working on a new personal website, so definitely recommend checking it out!

Brett from DesignJoy breaks down the process of creating animated mockups using Midjourney and Figma.

Wow, this looks incredible for mini-interactions. Looking forward to trying Magic Animator by Lottielab soon.

Jitter is a fast and simple animation tool. The plugin was rebuilt from the ground up for pixel-perfect compatibility, better performance, and powerful new import features like Figma Slides support, importing multiple frames or an entire Figma file, and better artboard pasting.

Cool page curl prototype by Miggi. Don’t miss the page turn animation on click.

A new plugin by Vijay Verma to quickly create animated smart components that are used most of the time, like rotate, zoom, slide, etc. It generates a set of components based on the selected animation preset.

A collection of fun interactions made by Nitish Khagwal.

Andrei Rybin shows his tools and methods for interface animations. Rive is a very interesting product I’ve been meaning to try for a while!

Nanda Syahrasyad explains how to export SVGs with individual paths from Figma to be animated with CSS. This article is a part of his Interactive SVG Animations course that will be launched this fall.

Benji Taylor on creating guiding principles and designing interactions for the Family crypto wallet app: ​“This is not a technical post or tutorial. There are many good resources about how to craft smooth animations or design pixel perfect UI, by people much smarter than I am. This is about how we made something complex feel welcoming. It’s about what makes Family feel familiar.”

The other day, I was looking for a tutorial on a specific animation technique and found this course by Tim Gabe. It’s free and has high-quality content — worth checking out!

Vijay shared his collection of loader prototypes in the community.

“Lottielab’s editor offers the easiest, fastest and most robust way to create animations for your websites and apps, exported as Lotties, GIFs and MP4s and allows you and your team to manage all these assets in one place. And with the Lottie format being supported natively by almost all major design tools out there (Canva, AdobeXD, Origami, Webflow, Framer etc), we’ve become the most complete way for designers to create animations for all platforms.”

Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.

A great practical guide showcases the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation.

A quick how-to video from Zander on creating a glowing animation inspired by the Disney logo. (And one more with a hover scale effect.)

Step 2: Learn from Vijay Verma how to create a cute animation using variables and conditions.