https://github.com/sikandarjodd/svelte-animations

Svelte Components using Tailwind CSS & Framer Motion
https://github.com/sikandarjodd/svelte-animations

components framer-motion free-components svelte tailwindcss

Last synced: 26 days ago
JSON representation

Svelte Components using Tailwind CSS & Framer Motion

• Host: GitHub
• URL: https://github.com/sikandarjodd/svelte-animations
• Owner: SikandarJODD
• License: mit
• Created: 2024-06-16T23:48:24.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-09-23T05:15:51.000Z (about 1 month ago)
• Last Synced: 2024-09-24T12:50:25.006Z (about 1 month ago)
• Topics: components, framer-motion, free-components, svelte, tailwindcss
• Language: Svelte
• Homepage: https://animation-svelte.vercel.app
• Size: 8.17 MB
• Stars: 458
• Watchers: 10
• Forks: 20
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Components 

Build using Tailwind CSS and [**Svelte motion**](https://svelte-motion.gradientdescent.de).

---

### New Templates

#### [Minimalist Developer Portfolio](https://portfolio-sve.vercel.app)

- GitHub : [Repo](https://github.com/SikandarJODD/portfolio-template)

  ![Preview](/static/portfolio_svelte.png)

#### [Start-up Landing Page](https://startup-sve.vercel.app)

- GitHub : [Repo](https://github.com/SikandarJODD/startup-template)

  ![Preview](/static//startup_sve.png)

### New Components

| Name           | Preview                                                        | Section  |

| -------------- | -------------------------------------------------------------- | -------- |

| Particles      | [Visit](https://animation-svelte.vercel.app/magic/particles)  | Magic UI |

| Cool Mode      | [Visit](https://animation-svelte.vercel.app/magic/cool-mode)  | Magic UI |

| Shine Border   | [Visit](https://animation-svelte.vercel.app/magic/shine-border)  | Magic UI |

| Magic Card     | [Visit](https://animation-svelte.vercel.app/magic/magic-card)  | Magic UI |

| Encrypt Button | [Visit](https://animation-svelte.vercel.app/magic/examples/11)  | 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           |

### Feedback

If you have any feedback, please reach out at [Twitter](https://twitter.com/Sikandar_Bhide)

### Credits

- [Magic UI](https://www.magicui.design/)

- [Luxe Components](https://www.luxeui.com)

- [Indie UI](https://ui.indie-starter.dev)

- [Hover.dev](https://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](https://github.com/sponsors/SikandarJODD)

- Share this project with your friends on [Twitter](https://twitter.com/intent/tweet?url=https://animation-svelte.vercel.app%0A&text=Svelte%20Animation%20Components%20Built%20using%20Svelte%20Motion%20and%20Tailwind%20CSS%0A&via=Sikandar_Bhide&hashtags=sveltejs,tailwindcss,webdev,frontend)