Animation
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.
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.
