Beta Status
This library is still in early beta and the API is subject to change and may get daily breaking changes. The documentaton may not be up to date with the latest features and include missing or outdated information. You can always create an issue on GitHub or even better a pull request to fix the documentation or add new features.
Demos
Interactive examples demonstrating motion-solid's capabilities.
First Animation
Basic enter animation with scale and opacity.
First Animation
Enter Animation
Smooth fade-in with position offset.
Enter Animation
Hover & Tap
Interactive button with scale feedback on hover and tap.
Hover and Tap Animation
Scroll Animation
Elements animate as they enter the viewport using whileInView.
Scroll Animation
Layout Animation
Position and size changes animate smoothly.
Layout Animation
Layout Border Radius
Layout animation with border-radius morphing.
Layout Border Radius
Click the card to toggle size. Watch the corners and shadow during the animation.
Layout Position
Shared element position transitions.
Layout Position
Layout Underline
Shared layoutId for tab indicator underline.
Layout Underline Animation
Animating Layout Bar
Layout animation demonstrating bar resizing.
Animating Layout Bar
Exit Animation
Exit animation when element is removed.