Component
Heart Like Button Animation in Framer
This is a heart button animation created in Framer, and the best part? No coding required! Feel free to borrow this component for your project — it's sure to add a fun, little touch to your website.
Created by
About the resource
This component employs a technique known as 'chained animation'—meaning we don't just use two variants for the start and end states of the animation, but we include several in-between steps as well.
To pull this off in Framer, I'm utilizing a tap interaction to kick-start the animation chain. After that, I link the middle steps using 'appear' animations that automatically activate as a variant shows up on the page.
About the resource
This component employs a technique known as 'chained animation'—meaning we don't just use two variants for the start and end states of the animation, but we include several in-between steps as well.
To pull this off in Framer, I'm utilizing a tap interaction to kick-start the animation chain. After that, I link the middle steps using 'appear' animations that automatically activate as a variant shows up on the page.
About the resource
This component employs a technique known as 'chained animation'—meaning we don't just use two variants for the start and end states of the animation, but we include several in-between steps as well.
To pull this off in Framer, I'm utilizing a tap interaction to kick-start the animation chain. After that, I link the middle steps using 'appear' animations that automatically activate as a variant shows up on the page.
Framer component variants used for creating the animation.
Framer component variants used for creating the animation.
Framer component variants used for creating the animation.
I also employed another little trick in this animation—I placed the SVG code of the heart icon into an SVG component. This allowed me to animate the size of the SVG by resizing the SVG component. If you just paste an SVG layer into Framer, it won't animate across different variants.
I also employed another little trick in this animation—I placed the SVG code of the heart icon into an SVG component. This allowed me to animate the size of the SVG by resizing the SVG component. If you just paste an SVG layer into Framer, it won't animate across different variants.
I also employed another little trick in this animation—I placed the SVG code of the heart icon into an SVG component. This allowed me to animate the size of the SVG by resizing the SVG component. If you just paste an SVG layer into Framer, it won't animate across different variants.
Handy little SVG component in Framer.
Handy little SVG component in Framer.
Handy little SVG component in Framer.
You can get this SVG component by remixing the project—where you'll then find and copy the component from.
You can get this SVG component by remixing the project—where you'll then find and copy the component from.
You can get this SVG component by remixing the project—where you'll then find and copy the component from.
