Amazing Button Click Animation With Framer Motion's New Animation Sequences
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.