Rotating Section Scroll Animation in Framer

Rotating Section Scroll Animation in Framer

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

Animation

Rotating Section Scroll Animation in Framer

This is a Framer recreation of the scroll animation from the Census website. Feel free to remix the project and learn how you can build a scroll animation like this in Framer, without any code.

image of Nandi Muzsik
profile image of Akshay Agrawal

Created by

Rotating Section Scroll Animation in Framer
Rotating Section Scroll Animation in Framer
Rotating Section Scroll Animation in Framer

About This Resource

This demo of a scroll animation, that doesn't require any coding, makes good use of sticky positioning combined with trigger frames.

I've explained this method in some of my YouTube tutorials. For instance, you can look at this one where I recreated a tilted 3D scrolling.

The whole idea of this method is to set up a 'sticky' section that stays in the view as we scroll through the site - in our case, it's the container with the circle and the texts. We then add trigger frames, attaching scroll sections to them. These trigger frames basically move over the 'sticky' section as we scroll down the site. That's how we manage to trigger scroll transforms (using scroll section triggers) and tweak the layers within our sticky box.

About This Resource

This demo of a scroll animation, that doesn't require any coding, makes good use of sticky positioning combined with trigger frames.

I've explained this method in some of my YouTube tutorials. For instance, you can look at this one where I recreated a tilted 3D scrolling.

The whole idea of this method is to set up a 'sticky' section that stays in the view as we scroll through the site - in our case, it's the container with the circle and the texts. We then add trigger frames, attaching scroll sections to them. These trigger frames basically move over the 'sticky' section as we scroll down the site. That's how we manage to trigger scroll transforms (using scroll section triggers) and tweak the layers within our sticky box.

About This Resource

This demo of a scroll animation, that doesn't require any coding, makes good use of sticky positioning combined with trigger frames.

I've explained this method in some of my YouTube tutorials. For instance, you can look at this one where I recreated a tilted 3D scrolling.

The whole idea of this method is to set up a 'sticky' section that stays in the view as we scroll through the site - in our case, it's the container with the circle and the texts. We then add trigger frames, attaching scroll sections to them. These trigger frames basically move over the 'sticky' section as we scroll down the site. That's how we manage to trigger scroll transforms (using scroll section triggers) and tweak the layers within our sticky box.

rotating section layers structure

Rotating section layers structure.

rotating section layers structure

Rotating section layers structure.

rotating section layers structure

Rotating section layers structure.

If you check the layers panel, you'll see that layers marked with a small "*" have scroll transforms, while those with a small "#" are tagged with scroll sections.

If you check the layers panel, you'll see that layers marked with a small "*" have scroll transforms, while those with a small "#" are tagged with scroll sections.

If you check the layers panel, you'll see that layers marked with a small "*" have scroll transforms, while those with a small "#" are tagged with scroll sections.

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

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

  • New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation