lottie-animations

You can render After Effects animations in React by using this skill to process JSON and dotLottie vector files. It manages animation lifecycles and playback states via React wrappers, ensuring high-fidelity visuals without the heavy file sizes of GIFs or videos.

Yes, you can control Lottie playback using scroll position. The skill supports scroll-driven animations and interactive controls, allowing you to programmatically play, pause, seek, and loop vector animations based on user interactions.

This skill supports rendering both standard Lottie JSON and dotLottie files. It integrates with lottie-web and dotlottie-web libraries alongside their React wrappers to manage animation lifecycles across web, iOS, and Android platforms.

The best way to optimize web performance for vector animations is utilizing canvas or web workers. This skill leverages performance-optimized rendering via canvas or web workers to keep complex micro-interactions lightweight and scalable.

You can use GSAP alongside Lottie animations to build complex micro-interactions. GSAP is included as a dependency to help orchestrate scroll-driven storytelling elements and synchronize animation playback states within your web applications.

You should use dotLottie instead of GIF for loading states because it delivers high-fidelity vector graphics without heavy file sizes. This skill renders scalable, performance-optimized micro-interactions that remain lightweight across web applications.