theethergit/svelte-animations

Svelte Animations Examples using Spring and Tweened

Simple Components

Build using Tailwind CSS and Svelte Motion.

Svelte Motion Docs : svelte-motion

Hosted on Vercel : Svelte Components

---

New Components

Name	Preview	Section
Blur Fade	Visit	Magic UI New
Simple Cards	Visit	Indie UI
Border Beam	Visit	Magic UI
Meteors	Visit	Magic UI
Box Reveal	Visit	Magic UI
Marquee	Visit	Magic UI
Bento Grid	Visit	Magic UI

Svelte Spring, Crossfade, Svelte-Motion Examples

Effects	Description
Link Hover	It's show small Image after hovering a tag
Modul Div	Crossfade Animation on Div, Inspired from modul.so
Spring Div	Simple Usage of Spring on Extending div height & width
Dynamic Island	Effect inspired from Emil Kowalski : Time, Ring, Silent
Reveal Link	Reveal Link on Hover, Inspired from hover.dev

Framer Motion Examples

Effects	Description
Tweened, Spring	Simple tweened and spring
Duration Based Spring	includes, stiffness, bounce
Repeat Reverse	repeat : infinity, reverseType : 'reverse'
Gestures	While Hover, While Tap, While Drag
Cycling through States	manuallt going via .next() and .prev()
Animation Sequence	going through sequence of animations
Drag	Transform, 3D Transform

Feedback

If you have any feedback, please reach out at Twitter

Support

• For support, You can sponsor me on GitHub
• Share this project with your friends and colleagues Share on Twitter