How to Create an Extra Reveal On-Page Load Animation in Webflow

Webflow is a powerful tool for building websites with an intuitive visual interface. In this tutorial, we'll learn how to create an extra reveal on-page load animation in Webflow, all without the need for writing code. This animation can add a dynamic and engaging element to your website, catching your visitors' attention. The extra reveal on-page load animation involves animating individual letters of a headline or text block as they come into view when the page loads.

Designing Your Page in Webflow

To get started, you'll need to design your page in Webflow. This involves creating the layout, adding and styling elements, and preparing the content for the animation.

Adding Text Elements

Once your page layout is ready, you can add the text that will be animated. This can be a heading or a text block. For this effect to work, we'll need to select the first letter of the text and create a text span for it. You can give this text span a class and ensure that it's set to "inline block" because the effect won't work with inline elements.

You'll need to repeat this process for each letter of the text. Make each letter a text span, give them unique classes, and remember to set them as inline blocks.

Setting the Main Text or Heading Element

After creating text spans for each letter, you'll want to set the main text or heading element (the overall text that contains the individual spans) to "overflow: hidden." This is an important step to ensure that the animation works as intended.

You can test whether the overflow hidden setting is working by selecting one of your text spans, setting it to "relative," and then moving it up or down until it goes out of the container's view. If it doesn't go out of view, it means a step was missed or not executed correctly.

Creating the Page Load Interaction

With the text elements prepared, we can now create the page load interaction. In Webflow, click on "Start an animation" and then create a new animation. Let's name it "text animation."

Adding Move and Rotate Actions

Within the animation timeline, select the first text span and add a move action to lower it so it goes just out of view. Set this as the initial state. Then, add a rotate action to move it up, also set to the initial state. You can adjust the rotation to your liking.

Duplicate these actions and join them together so they start at the same time. Each duplicated set of actions should have a duration of two seconds. Consider adding a custom easing factor and changing both numbers to zero, so they will go back to their original positioning.

Applying the Animation to Other Letters

To extend the animation to the other letters, simply duplicate the move and rotate actions for each subsequent letter. Change the targets to be the respective letters, and add an additional 0.2 seconds delay (or any duration you prefer) for each subsequent letter.

You can choose to target the letters as elements or classes; generally, it doesn't matter. If you're unsure about this step, you can slow down the tutorial video and watch the process in action.

Don't forget to add initial states for all the other letters too. This ensures that the animation starts from the correct position for all the letters.

Publishing and Enjoying Your Work

Once you've completed the animation setup, you can publish your website and enjoy the extra reveal on-page load animation that you've created. The animation will engage visitors as the text comes into view, adding a dynamic and visually appealing element to your website.

We hope you've found this tutorial helpful, and we encourage you to incorporate this extra reveal on-page load animation into the websites you build using Webflow. It's a great way to enhance the user experience and add a touch of sophistication to your designs.

We look forward to seeing the creative ways in which you use this animation in your web projects. Thank you for watching, and we'll see you in the next tutorial. Happy animating!