Resources

Text Repetition on Scroll in Framer

View demo

Remix project

Remix project

Resources

Text Repetition on Scroll in Framer

View demo

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

Get the course

$10k Undercover Event

Get the course

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. 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.

image of Nandi Muzsik
image of Natalia

Created by

Nandi

and

Natalia

Stylized 'SOULMATE' typography with a glitch effect, featuring horizontal line distortions and repeated elements for a modern, digital aesthetic

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.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Business growth cards: Zero to One, Scaling, Quick solutions

    3D Image Split Scroll Animation in Framer

    Animation

    Business growth cards: Zero to One, Scaling, Quick solutions

    3D Image Split Scroll Animation in Framer

    Animation

  • WordPress showcase hero with featured brand logos

    Unmask Sections On Scroll in Framer

    Animation

    WordPress showcase hero with featured brand logos

    Unmask Sections On Scroll in Framer

    Animation