A blurry text reveal animation on scroll inspired by Rauno’s “Blur reveal”.

Some interesting experiments have been shared lately on X showing progressive blurs on all kinds of elements and this one by Rauno caught my eye:

It’s a stunning effect and I was wondering if something similar could be achieved by simply “unblurring” text while we scroll. I want to share these results with you today, hope you like them!

They don’t have the sophisticated mask effect but I like the results, especially when paired with a grainy background:

Animating filters can be a bit heavy on some machines so this is not perfect of course. But used in moderation on small texts can really contribute to nice visuals!

If you play with the initial values, you can create some interesting looks:

Enjoy and bring it to the next level!

Thanks for checking by.

Some On-Scroll Text Highlight Animations
Case Study: Gabriel Contassot’s Portfolio — 2024

Tagged with: blur scroll typography

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.



Source link

Related Posts

Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Welcome Back!

Login to your account below

Create New Account!

Fill the forms bellow to register

Retrieve your password

Please enter your username or email address to reset your password.