midudev / tailwind-animations

Easy peasy animations for your Tailwind project
https://tailwindcss-animations.vercel.app/
MIT License
543 stars 65 forks source link

feat: add "jelly" animation #61

Closed qpwoei0123 closed 2 months ago

qpwoei0123 commented 2 months ago

What does this PR do? This PR adds a new animation named jelly to the Tailwind CSS animation utilities. The jelly animation gives a jelly-like effect where the element scales up and down in a springy fashion, making it look elastic and bouncy.

Why are we doing this? We are adding the jelly animation to provide developers with more variety and flexibility in animation options within Tailwind CSS. This animation can be particularly useful for elements that need a playful or attention-grabbing effect, such as buttons, icons, or loading indicators. The jelly animation enhances user experience by adding dynamic visual feedback, making web interfaces feel more interactive and engaging.


Test Case(s): Apply the animate-jelly class to a button element and verify the jelly animation effect on hover.

Test Result(s): The button element correctly displays the jelly animation on hover, scaling smoothly in and out as expected.


Checklist

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwind-animations ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 30, 2024 1:59am
qpwoei0123 commented 2 months ago

Here is an example Aug-29-2024 17-48-17