Animation
Text Repetition on Scroll in Framer
This is a Framer recreation of the text repetition scroll animation originally seen on the Dr. Dabber website. Feel free to remix the project to see how something like this is built in Framer.
About the resource
After creating the text, I positioned them on top of each other using absolute positioning. I then duplicated the text layers, resulting in four top layers (Top 1-4) and three bottom layers (Bottom 1-3).
Next, I applied a scroll speed effect to each text layer. I adjusted the settings so that the further back an element is positioned in the Z-index, the faster its scroll speed. For the Top 1-4 layers, I set the speed above 100%, making them move upward as the user scrolls. For the Bottom 1-3 layers, I set the speed below 100%, making them move downward instead.
About the resource
After creating the text, I positioned them on top of each other using absolute positioning. I then duplicated the text layers, resulting in four top layers (Top 1-4) and three bottom layers (Bottom 1-3).
Next, I applied a scroll speed effect to each text layer. I adjusted the settings so that the further back an element is positioned in the Z-index, the faster its scroll speed. For the Top 1-4 layers, I set the speed above 100%, making them move upward as the user scrolls. For the Bottom 1-3 layers, I set the speed below 100%, making them move downward instead.
About the resource
After creating the text, I positioned them on top of each other using absolute positioning. I then duplicated the text layers, resulting in four top layers (Top 1-4) and three bottom layers (Bottom 1-3).
Next, I applied a scroll speed effect to each text layer. I adjusted the settings so that the further back an element is positioned in the Z-index, the faster its scroll speed. For the Top 1-4 layers, I set the speed above 100%, making them move upward as the user scrolls. For the Bottom 1-3 layers, I set the speed below 100%, making them move downward instead.
