Sticky Scroll Animations

Every cool new project seems to be working with Fixed Scroll animations on your features. Let's dive in and see how to recreate this effect in Framer.

Copy Remix link

Preview

Text variants

Start by creating a new component for your text variants. This is the text that will show next to your features. Add a new variant for every feature you'd like to display. Don't forget to add a empty variant if you'd like to start blank.

Create container

Let's create a stack for your text variations. Make sure to set the stack to 100vh and center align.

Setting up the container

To finish the setup we need to wrap the stack from step 2 in another stack and set width of container to 1000px. Duplicate your text stack and remove the text variant from the right stack. When done, just set the left container containing your text to Sticky and set parent containers to Overflow: visible.

Adding your features

As you can see I've added 3 feature images and all wrapped them in a Frame. I've set Frame height to 500px, but you can play with the height yourself depending on your images. Furthermore add a spacer to the top and bottom of the right container and set height to 50vh.

Scroll Sections

To create a hook for the text variant to change, we need to add Scroll sections. I've added a scroll-section for all children of the right container. So the two spacers and the 3 image frames.

Add Scroll Variant

Add the following Scroll variant to your text component.

Scroll Animations

Let's set up the Scroll Animations on the images. Follow the video to see all the steps.

Copying your animations

Now we've added the Scroll Animation on image 1. Let's duplicate the effect for the other two and change accordingly. Check the video for exact changes.

Table of contents

Final result