Rotating Section Scroll Animation in Framer

Rotating Section Scroll Animation in Framer

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
image of Akshay

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

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation

    Interactive 3D Hero Animation in Framer

    Interactive 3D Hero Animation in Framer

    Animation

    Veggie Button Animation in Framer

    Veggie Button Animation in Framer

    Animation

    Veggie Button Animation in Framer

    Veggie Button Animation in Framer

    Animation

    Veggie Button Animation in Framer

    Veggie Button Animation in Framer

    Animation