Component
Netflix “Love This” Animation in Framer
About the resource
This component uses a staggered animation effect with four variants. To create the staggered movement, one icon's transition is overridden, while other elements fade in and out smoothly using the opacity property as the icons move.
In Framer, some properties, like direct color changes in SVGs, are not animated during transitions between variants. To work around this, the SVG is wrapped in a frame and duplicated to include both the outline and fill versions. A fill color is assigned to the duplicate, and the transition from outline to fill is animated by adjusting the opacity of the fill version.
The animation begins with a click interaction, followed by 'appear' animations that automatically trigger intermediate steps as each variant shows up (also known as the rollover technique). Finally, a click interaction in the fourth variant resets the animation to its default state.
About the resource
This component uses a staggered animation effect with four variants. To create the staggered movement, one icon's transition is overridden, while other elements fade in and out smoothly using the opacity property as the icons move.
In Framer, some properties, like direct color changes in SVGs, are not animated during transitions between variants. To work around this, the SVG is wrapped in a frame and duplicated to include both the outline and fill versions. A fill color is assigned to the duplicate, and the transition from outline to fill is animated by adjusting the opacity of the fill version.
The animation begins with a click interaction, followed by 'appear' animations that automatically trigger intermediate steps as each variant shows up (also known as the rollover technique). Finally, a click interaction in the fourth variant resets the animation to its default state.
About the resource
This component uses a staggered animation effect with four variants. To create the staggered movement, one icon's transition is overridden, while other elements fade in and out smoothly using the opacity property as the icons move.
In Framer, some properties, like direct color changes in SVGs, are not animated during transitions between variants. To work around this, the SVG is wrapped in a frame and duplicated to include both the outline and fill versions. A fill color is assigned to the duplicate, and the transition from outline to fill is animated by adjusting the opacity of the fill version.
The animation begins with a click interaction, followed by 'appear' animations that automatically trigger intermediate steps as each variant shows up (also known as the rollover technique). Finally, a click interaction in the fourth variant resets the animation to its default state.
The four variants of the component in Framer.
The four variants of the component in Framer.
The four variants of the component in Framer.
