Reveal Blurred Text on Page Scroll! - Motion.page / GSAP
In today’s video, Luke demonstrates how to create a simple yet effective scroll-triggered text reveal animation using Motion.page and Bricks Builder. The tutorial focuses on pinning a section while gradually unblurring each word of the text as the user scrolls, offering a captivating way to present song lyrics or similar content on a webpage.
Steps
Setting Up the Page in Bricks Builder:
Create a New Page:
Begin by creating a new page titled Song Lyrics in Bricks Builder and publish it.
Add Buffer Sections for Scroll Space:
Insert three sections to create vertical space: the top and bottom as scroll buffers (70vh height), and the middle one as the main animation section.
Add and Style the Text:
In the middle section, insert a header element containing the song lyrics. Align content to center and style the text appropriately (e.g., large heading, line breaks for lyrics). Optionally, use classes for easier targeting, although the scanner selector will suffice for this tutorial.
Configuring the Scroll-Triggered Blur Animation:
Create a New Timeline:
Open Motion.page, select the Song Lyrics page, and create a new timeline named the same.
Enable Scroll Trigger and Pinning:
Enable scroll trigger and pinning options. Lock the animation to the scrollbar to keep it in sync.
Select the Section to Pin:
Target the main section using its unique ID. Set the start point for pinning at 15% from the top and the end point at -100% (i.e., unpin after the full section scrolls past). Set vertical alignment to “top.”
Animating with Motion Page:
Target the Text Element:
Use the ID of the text element (song lyrics) as the animation target.
Set Initial and Final Blur States:
Apply a blur filter of 15–20px in the “From” state so the text is unreadable initially. Set the “To” state to 0px blur to reveal the text during scroll.
Split and Stagger the Animation:
Split the text by words and apply a stagger of around 5 seconds, so each word gradually becomes clear as the user scrolls.
Enhancing the Animation:
Adjust Scroll Experience:
Test the animation on the frontend. As the user scrolls, the lyrics section stays pinned and words reveal themselves one by one. After the animation finishes, the section unpins and scrolling continues.
Optimize Section Heights:
Instead of using fixed height values for scroll sections, consider setting a minimum height. This ensures the section expands if the text is long, preventing overflow or cut-off content.
Conclusion
Luke’s tutorial provides a concise and powerful method for animating text reveals using scroll-based interactions in Bricks Builder and Motion.page. This effect is ideal for presenting song lyrics, quotes, or any important text in an engaging, cinematic way. With simple pinning and blur transitions, designers can enhance storytelling and add a professional touch to their web pages.
Video transcript
Hello guys, welcome back to the channel. My name is Luke, and in today’s video, I want to show you how to create something quite simple but effective. Here’s an example: as I scroll down, we have a pinned element with blurred text. You can see that the text reveals itself. The section is also pinned, and once that’s finished, it is unpinned and then we can continue scrolling.
So let me show you how to create something like this using Motion.page and Bricks Builder.
The first thing I’m going to do is create a new page. I’ll just call this “Song Lyrics” and publish it, then edit it with Bricks. The first thing I’m going to do is just add some buffer sections so we have room to scroll. I’ll create a new section with a height of 70 viewport height. For the container, I’ll set it to 100% and then duplicate it twice. The middle section will be our main section, so I’ll call it “main section” so I know what I’m doing.
Inside the main section, I’ll add our song lyrics using a heading element. On the container, I’ll set everything to be centered. I’ll make this a header one and quickly change the text size. Then I’ll paste our song lyrics and add line breaks where necessary. That’s exactly what I need. I could add classes to these elements to make life easier in Motion.page, but for this tutorial I’m going to use the scanner selector instead. I’ll save this, and then we can already open up Motion.page.
Let’s create a new timeline. I’m going to select our new page, “Song Lyrics,” and name the timeline the same. This will obviously use a scroll trigger because all of the animation happens on scroll. I’ll lock it to the scroll bar so it’s synced with scrolling. We do have a pinned element, so I’ll check that box. Then I’ll select our section — this one here — using its unique ID.
I want it to start pinning when the song lyrics are almost at the top of the screen. The red line is almost perfect here at 15%, so I’ll use that value. Then I want the pinning to stop once we’ve scrolled 100% of the section, so I’ll set that to minus 100%. I’ll also set the vertical alignment to “top.”
Now for the animation. This will be our text, so I’ll select the ID of our text. Initially, we want the text to be blurred. So in the “from” section, I’ll apply a filter blur and set it to something like 15 pixels — maybe 20 pixels so it’s unreadable. Then we want to unblur it as we scroll. In the “to” section, I’ll set the blur to zero pixels.
Now, you’ll notice as I scroll, it’s pinned but the text is unblurring all at once. We don’t want that. So in the “to” section, we’ll split the text by words and then stagger it. I’ll set the stagger amount to 5 seconds. Now each word reveals itself individually, and then we unpin. I’ll save the timeline and check the front end.
As we scroll down, we get this nice effect. It doesn’t have to be song lyrics — it could be anything related to your website. Once the animation is finished, the section unpins and we continue scrolling.
Just be careful — for this tutorial, I used set heights in Bricks for the sections. But depending on your text length, it might be better to use minimum height values instead of fixed heights. That way, if your text is longer, the section can expand with it.
So there you have it — a short tutorial today. I actually discovered this effect on CodePen and thought it would make a good Motion.page tutorial. If you have any requests, let us know in the comments below. We hope you liked the tutorial and we’ll see you in the next video. Thank you.
