🥳 Enjoy 3 months of Framer for free!
What are we building
#1 - Set up your 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.
#2 - Create your text variations container
Let's create a stack for your text variations. Make sure to set the stack to 100vh and center align.
#3 - 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.
#4 - Adding your features to the right container
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.
#5- Setting up 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.
#6- Add Scroll Variant to Text element
Add the following Scroll variant to your text component.
#7 - Adding the Scroll Animations
Let's set up the Scroll Animations on the images. Follow the video to see all the steps.
#8 - Finishing the Scroll variants for all images
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.
👋 I hope you've enjoyed today's drop.