How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Animation
This is a Framer recreation of the text repetition scroll animation originally seen on the Dr. Dabber website. Thanks for the Codrops website for bringing this crazy effect to my attention. Feel free to remix the project to see how something like this is built in Framer.
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.
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.
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.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
