Amazing Button Click Animation With Framer Motion’s New Animation Sequences
In this video we’ll be creating an awesome animated button with Framer Motion. A button similar to for example Twitter’s like animation. In our case the button has a star sparkle effect animates the text letter by letter when it’s being clicked.
For this we’ll be using Framer Motions new and powerful animation sequences – a tool that makes it really easy to create timelines within your animations. These timelines then make it super easy to make animations dependent on each other / happen at certain times.
Links
- Live demo & playground of what we’ve build.
- Watch Video on YouTube
Source code
- HTML and JavaScript part can be found in /src/app.tsx
- The styling part can be used in /src/index.css
Tools used
React, TypeScript, Framer Motion, Tailwind.
