SikandarJODD / svelte-animations

Svelte Components using Tailwind CSS & Framer Motion

Simple Components

Build using Tailwind CSS and Svelte motion.

---

New Templates

Minimalist Developer Portfolio

• GitHub : Repo

Startup Landing Page

• GitHub : Repo

New Components

Name	Preview	Section
Box Reveal	Visit	Magic UI
Dock Menu	Visit	Magic UI
Animated Subscribe Button	Visit	Magic UI
Pulsating Button	Visit	Magic UI
Blur In	Visit	Magic UI
Word Rotate	Visit	Magic UI

Svelte Animations 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

Credits

• Magic UI
• Luxe Components
• Indie UI
• Hover.dev

Components are inspired from the above mentioned websites. Thankyou everyone for building such amazing components.

Support

• If you Like my work, you can sponsor me on GitHub
• Share this project with your friends on Twitter