The Easiest Framer Scroll Animation Technique

The Easiest Framer Scroll Animation Technique

  • Tips & tricks

  • Scroll
  • Animation
  • Tips & tricks

  • Scroll
  • Animation
  • Tips & tricks

  • Scroll
  • Animation

The Easiest Framer Scroll Animation Technique

Learn the easiest scroll animation technique that you can start using in Framer without any coding knowledge. Follow along and I'll show you how sticky positioning work and how to trigger scroll effects with scroll sections. After following along this video, you’ll have the knowledge that is needed to create the most amazing scroll animations on your websites (without any code!).

image of Nandi Muzsik

Posted by

Nandi

A design titled 'Scroll Animation' features a black and white image of a bench, with arrows and a hand icon suggesting interactive scroll animation direction on the screen
A design titled 'Scroll Animation' features a black and white image of a bench, with arrows and a hand icon suggesting interactive scroll animation direction on the screen
A design titled 'Scroll Animation' features a black and white image of a bench, with arrows and a hand icon suggesting interactive scroll animation direction on the screen

Table of contents

The roadmap

We’ll break this tutorial into four key sections:

  1. Understanding the technique – A quick rundown of how it works.

  2. Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.

  3. Creating scroll triggers – Setting up triggers to control animations.

  4. Applying scroll effects – Adding scroll transforms and variant switches for animation.

The technique explained

Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.

The roadmap

We’ll break this tutorial into four key sections:

  1. Understanding the technique – A quick rundown of how it works.

  2. Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.

  3. Creating scroll triggers – Setting up triggers to control animations.

  4. Applying scroll effects – Adding scroll transforms and variant switches for animation.

The technique explained

Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.

The roadmap

We’ll break this tutorial into four key sections:

  1. Understanding the technique – A quick rundown of how it works.

  2. Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.

  3. Creating scroll triggers – Setting up triggers to control animations.

  4. Applying scroll effects – Adding scroll transforms and variant switches for animation.

The technique explained

Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.

Coin example scroll animation.

Coin example scroll animation.

Coin example scroll animation.

The key components of this technique are:

  • A sticky frame that stays in place.

  • Scroll triggers that activate animations.

  • Scroll transforms and variant switches to create movement and transitions.

Setting up sticky positioning

For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.

Step 1: Setting up the layout

In Framer, create a project with the following structure:

  • A Main Section (acts as the main container).

  • Within the Main, a Spacer Section (to add spacing at the top and bottom).

  • Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).

  • Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).

Step 2: Applying sticky positioning

To keep the element in place:

  • Select the frame named “sticky”.

  • Set its position to sticky.

  • Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.

Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.

The key components of this technique are:

  • A sticky frame that stays in place.

  • Scroll triggers that activate animations.

  • Scroll transforms and variant switches to create movement and transitions.

Setting up sticky positioning

For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.

Step 1: Setting up the layout

In Framer, create a project with the following structure:

  • A Main Section (acts as the main container).

  • Within the Main, a Spacer Section (to add spacing at the top and bottom).

  • Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).

  • Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).

Step 2: Applying sticky positioning

To keep the element in place:

  • Select the frame named “sticky”.

  • Set its position to sticky.

  • Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.

Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.

The key components of this technique are:

  • A sticky frame that stays in place.

  • Scroll triggers that activate animations.

  • Scroll transforms and variant switches to create movement and transitions.

Setting up sticky positioning

For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.

Step 1: Setting up the layout

In Framer, create a project with the following structure:

  • A Main Section (acts as the main container).

  • Within the Main, a Spacer Section (to add spacing at the top and bottom).

  • Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).

  • Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).

Step 2: Applying sticky positioning

To keep the element in place:

  • Select the frame named “sticky”.

  • Set its position to sticky.

  • Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.

Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.

Screenshot of a web design interface in Framer displaying layout options for a section titled 'Design Showcased'

Set to sticky position.

Screenshot of a web design interface in Framer displaying layout options for a section titled 'Design Showcased'

Set to sticky position.

Screenshot of a web design interface in Framer displaying layout options for a section titled 'Design Showcased'

Set to sticky position.

Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.

Creating scroll triggers

Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.

Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.

Creating scroll triggers

Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.

Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.

Creating scroll triggers

Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.

Mobile UI design in Framer showcasing a list of trigger frames for animation transitions

Trigger frame structure.

Mobile UI design in Framer showcasing a list of trigger frames for animation transitions

Trigger frame structure.

Mobile UI design in Framer showcasing a list of trigger frames for animation transitions

Trigger frame structure.

Step 1: Setting up trigger frames

  • Create a trigger frames section inside the scroll animation container (below the sticky frame).

  • Add multiple trigger frames within this section.

  • Name each trigger frame based on its function (e.g., variant-switch-1).

  • Ensure they are not sticky so they scroll naturally.

Step 2: Assign scroll sections

  • Select each trigger frame.

  • Assign a scroll section that matches its layer name.

  • This allows Framer to detect when each section enters the viewport and trigger animations accordingly.

Applying scroll effects

Now, let’s animate the sticky frame using scroll transform and scroll variants.

Effect 1: Scroll transform

Scroll transforms let us animate elements based on their scroll position.

Step 1: Adding scroll transform:

  • Select the sticky frame (the coin in this case).

  • Open the effects panel and add a scroll transform.

  • Set the trigger to section in view.

  • Choose bottom of viewport as the entry point.

  • Assign the corresponding scroll section (e.g., variant-switch-1).

Step 2: Defining the animation:

  • Set the from state (initial values).

  • Set the to state (final values, e.g., rotation, scale, opacity).

  • Add a smooth transition for a fluid effect.

Effect 2: Scroll variants

Scroll variants allow you to switch between different component variants as you scroll.

Step 1: Creating variants:

  • Convert the sticky frame into a component.

  • Create multiple variants with different styles (e.g., different colors, icons, or text).

Step 2: Adding scroll variant effect:

  • Select the component.

  • Add a scroll variant effect.

  • Set the trigger to section in view.

  • Choose the variant switch section.

  • Define the target variant.

Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!

Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.

Wrapping up

By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.

You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.

And for some extra guidance, check out my video on beginner scroll animations.

Step 1: Setting up trigger frames

  • Create a trigger frames section inside the scroll animation container (below the sticky frame).

  • Add multiple trigger frames within this section.

  • Name each trigger frame based on its function (e.g., variant-switch-1).

  • Ensure they are not sticky so they scroll naturally.

Step 2: Assign scroll sections

  • Select each trigger frame.

  • Assign a scroll section that matches its layer name.

  • This allows Framer to detect when each section enters the viewport and trigger animations accordingly.

Applying scroll effects

Now, let’s animate the sticky frame using scroll transform and scroll variants.

Effect 1: Scroll transform

Scroll transforms let us animate elements based on their scroll position.

Step 1: Adding scroll transform:

  • Select the sticky frame (the coin in this case).

  • Open the effects panel and add a scroll transform.

  • Set the trigger to section in view.

  • Choose bottom of viewport as the entry point.

  • Assign the corresponding scroll section (e.g., variant-switch-1).

Step 2: Defining the animation:

  • Set the from state (initial values).

  • Set the to state (final values, e.g., rotation, scale, opacity).

  • Add a smooth transition for a fluid effect.

Effect 2: Scroll variants

Scroll variants allow you to switch between different component variants as you scroll.

Step 1: Creating variants:

  • Convert the sticky frame into a component.

  • Create multiple variants with different styles (e.g., different colors, icons, or text).

Step 2: Adding scroll variant effect:

  • Select the component.

  • Add a scroll variant effect.

  • Set the trigger to section in view.

  • Choose the variant switch section.

  • Define the target variant.

Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!

Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.

Wrapping up

By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.

You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.

And for some extra guidance, check out my video on beginner scroll animations.

Step 1: Setting up trigger frames

  • Create a trigger frames section inside the scroll animation container (below the sticky frame).

  • Add multiple trigger frames within this section.

  • Name each trigger frame based on its function (e.g., variant-switch-1).

  • Ensure they are not sticky so they scroll naturally.

Step 2: Assign scroll sections

  • Select each trigger frame.

  • Assign a scroll section that matches its layer name.

  • This allows Framer to detect when each section enters the viewport and trigger animations accordingly.

Applying scroll effects

Now, let’s animate the sticky frame using scroll transform and scroll variants.

Effect 1: Scroll transform

Scroll transforms let us animate elements based on their scroll position.

Step 1: Adding scroll transform:

  • Select the sticky frame (the coin in this case).

  • Open the effects panel and add a scroll transform.

  • Set the trigger to section in view.

  • Choose bottom of viewport as the entry point.

  • Assign the corresponding scroll section (e.g., variant-switch-1).

Step 2: Defining the animation:

  • Set the from state (initial values).

  • Set the to state (final values, e.g., rotation, scale, opacity).

  • Add a smooth transition for a fluid effect.

Effect 2: Scroll variants

Scroll variants allow you to switch between different component variants as you scroll.

Step 1: Creating variants:

  • Convert the sticky frame into a component.

  • Create multiple variants with different styles (e.g., different colors, icons, or text).

Step 2: Adding scroll variant effect:

  • Select the component.

  • Add a scroll variant effect.

  • Set the trigger to section in view.

  • Choose the variant switch section.

  • Define the target variant.

Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!

Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.

Wrapping up

By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.

You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.

And for some extra guidance, check out my video on beginner scroll animations.

A graphic design displaying the word 'Scroll' with overlapping circular elements in blue and green, each featuring an icon, enhancing the visual dynamics of scrolling animations

3D flip scroll resource.

A graphic design displaying the word 'Scroll' with overlapping circular elements in blue and green, each featuring an icon, enhancing the visual dynamics of scrolling animations

3D flip scroll resource.

A graphic design displaying the word 'Scroll' with overlapping circular elements in blue and green, each featuring an icon, enhancing the visual dynamics of scrolling animations

3D flip scroll resource.

This technique is perfect for adding interactive elements to your website without needing any coding skills.

Give it a try, and start adding some motion magic to your Framer projects.

This technique is perfect for adding interactive elements to your website without needing any coding skills.

Give it a try, and start adding some motion magic to your Framer projects.

This technique is perfect for adding interactive elements to your website without needing any coding skills.

Give it a try, and start adding some motion magic to your Framer projects.

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 posts

More posts

  • Interactive magnetic button effect with hover animation in Framer UI

    How to Make Magnetic Buttons in Framer

    Guide

    Interactive magnetic button effect with hover animation in Framer UI

    How to Make Magnetic Buttons in Framer

    Guide

    Interactive magnetic button effect with hover animation in Framer UI

    How to Make Magnetic Buttons in Framer

    Guide

  • Pixel trail effect, iPadOS pointer cursor, and parallax floating elements in Framer UI

    Use These 6 Components to Make Your Website Feel Premium

    Toplist

    Pixel trail effect, iPadOS pointer cursor, and parallax floating elements in Framer UI

    Use These 6 Components to Make Your Website Feel Premium

    Toplist

    Pixel trail effect, iPadOS pointer cursor, and parallax floating elements in Framer UI

    Use These 6 Components to Make Your Website Feel Premium

    Toplist

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