🥳 Enjoy 3 months of Framer for free!
What are we building
#1 - Creating the component
To create the magic text effect we should change variants based on your scroll position. Start by creating a component for your text. I simply created a frame and slapped a text layer onto it, before pressing CMD + Option + K to create a new component.
#2 - Setting up the variants of your components
I simply added some text to the first variant. It consists out of 3 text layers positioned below each other in a stack. After you've created all the text layers duplicate your variants and change the color so you end up with different text highlights.
#3 - Finishing up the variants
I didn't really like the difference between white and grey text so I decided to change the opacity to 0.1 of the text layers that were inactive. It's always advised to check all of your variants on the canvas to spot mistakes early on.
#4 - Set up Scroll sections
Because everything is inside one component, we need to add some scroll markers to actually know when to change the variants. In this example I wrapped the text variant component inside a frame and added 3 small rectangles. Position frames to your liking and add scroll sections.
#5 - Adding the scroll variant effect.
All we need to do is select the text variant component and add the scroll variant effect. Change the variants according to your scroll sections and you're good to go!
👋 I hope you've enjoyed today's drop.