Animation Categories in the Manifest
Anime.js (383)
Lightweight JavaScript animation library with timeline support, easing, and SVG morphing.
Framer Motion (167)
Declarative React animations with gesture support, layout animations, and shared transitions.
Rive Animations
Vector-based interactive animations created with Rive runtime for complex state machines.
Hover Effects
Scale, rotate, glow, and 3D transform effects triggered by mouse hover interactions.
Scroll Animations
Entrance animations, parallax effects, and scroll-triggered transitions.
Layout Animations
Accordions, tabs, modals, and other UI components with smooth state transitions.
Animation Component Statistics
Animation Component Questions
When should I use Anime.js vs Framer Motion?
Use Anime.js for complex timeline sequences, SVG animations, and when you need fine-grained control. Use Framer Motion for declarative React animations, gesture support, and layout animations.
What rendering mode do animations use?
Animation components use 'client:visible' by default, meaning they load and hydrate when they enter the viewport. This optimizes initial page load while ensuring smooth animations when visible.
How are animations organized in the manifest?
Animations are in three categories: 'animation/anime' for Anime.js, 'animation/motion' for Framer Motion, and 'animation/rive' for Rive runtime animations.
Do animations affect page performance?
The client:visible rendering mode defers animation JS until needed. Combined with requestAnimationFrame and GPU-accelerated transforms, animations have minimal performance impact.