Netflix “Love This” Animation in Framer

Copy component

Netflix “Love This” Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Netflix “Love This” Animation in Framer

This is a Netflix "Love This" animation recreation in Framer, based on the original work by Vaun Blu. Remix or copy this component to bring a cheerful interaction to your project.

image of Nandi Muzsik
Vaun Blu
image of Prianca S.

Created by

,

and

White 'like' icon with a hand cursor and decorative stars on a black background
White 'like' icon with a hand cursor and decorative stars on a black background
White 'like' icon with a hand cursor and decorative stars on a black background

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.

Workflow diagram showing transitions of a 'like' icon moving up and down with annotations on a black background

The four variants of the component in Framer.

Workflow diagram showing transitions of a 'like' icon moving up and down with annotations on a black background

The four variants of the component in Framer.

Workflow diagram showing transitions of a 'like' icon moving up and down with annotations on a black background

The four variants of the component in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

  • Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component