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.

? Timestamps
00:00 - Intro
00:12 - What we'll be building
01:04 - Start building (basic styles)
02:27 - Animating the text
12:00 - Adding button scale animation on click
13:42 - Resetting the animated text after animation
16:00 - Adding the sparkles animation ✨
25:45 - End result
26:28 - Outro

? Join us on Discord: https://www.frontend.fyi/discord
? Follow me on Twitter: https://twitter.com/JeroenReumkens & https://twitter.com/frontend_fyi
?? Check my mentorships: https://www.jeroenreumkens.nl/mentoring

? Live playground: https://www.frontend.fyi/v/framer-motion-like-animation
? Source on Github: https://github.com/frontendfyi/framer-motion-like-animation

Tools mentioned:
? Framer Motion: https://www.framer.com/motion/
? Tailwind: https://tailwindcss.com

#framermotion #react #css #tailwind #frontend