Creating a Page Loader Interaction in Webflow

Are you looking to add an engaging and interactive page loader to your website? In this tutorial, we’ll walk you through how to create a page loader interaction using Webflow. This loader will count up to 100 and then seamlessly reveal the hero section underneath it, with smooth easings and the ability to load faster upon page reload.

Preparing the Webflow Build

To start, first open your Webflow project. In the project, we will need to create a loader progress div element, which will act as the progress bar. This progress bar will animate its width. Position the progress bar using absolute positioning relative to its parent element. Within the parent div, create a child container element with a text color of red. To ensure the red font color doesn't interfere with the background color, apply a blend mode of difference to the child container element. This will invert the text color based on the background underneath.

By default, upon page load, we want the progress bar to be set to 0% width. Also, ensure that the text content inside the loader element is left empty using the shift key plus the space bar to create an empty text. This prevents any flickering of the elements upon initial loading.

Adding GSAP Animation

To add animation functionality, we will integrate GSAP (GreenSock Animation Platform). Begin by visiting greensock.com and navigate to the “Get GSAP Now” section. Import two libraries - the GSAP core and the custom ease library. Copy the code provided and paste it within the before body tag in your Webflow project. Additionally, link to your code sandbox file to write the script for the animation.

Creating the JavaScript Object

Start by creating a JavaScript object called counter and set its initial value to zero. Next, create a GSAP timeline that will affect the counter object and change its value from 0 to 100 over a duration of seven seconds. While this animation is in progress, the page text also needs to update accordingly. For this, create a function called updateLoaderText that selects the paragraph element loader number using jQuery, and updates its text to reflect the value of the counter object. This function should run every time the animation changes the value of the counter.

Upon refreshing the page, you will notice that the counter is counting up, but with a long string of decimal points. To display only whole numbers, create a variable called progress and set it equal to Math.round(counter value). This variable will be used to update the text content of the loader number, displaying rounded-off whole numbers as the counter progresses.

Animating the Progress Bar

To animate the progress bar, copy the point on the timeline and select the loader progress element. This time, animate the width of the progress bar from 0% to 100% over the same duration as the counter animation. Ensure that both the counter animation and the progress bar animation happen simultaneously.

Applying Custom Easing

To add an ease to the count-up animation, use GSAP's ease visualizer to select and create a custom ease that controls the speed variation. After obtaining the ease value, apply it to the counter animation. Create a variable to store the ease value and use it for both animations. Similarly, set a variable for the duration, allowing flexibility to update the duration in a single place for both animations.

Upon saving and refreshing the page, you will observe the counter animation slowing down in the middle and accelerating towards the end. These adjustments ensure a smooth and natural count-up effect.

Speeding Up Page Reload

To enhance user experience, when the page is reloaded, the loader animation needs to speed up rather than replaying the full animation. Implement session storage to check if the user has previously visited any page on the site in the current tab. If it is not the user's first visit, update the loader duration to 2 seconds and set the counter element's starting value to 75, enabling it to count up to 100 faster using GSAP. Upon a fresh page load, the loader will count up from 75 to 100 in just two seconds, resulting in a quicker loading experience for returning visitors.

Hiding the Loader

Finally, when the animation is complete, we need to hide the loader. Add a trigger div with the class of "trigger" and initially set it to display: none. Implement a function that triggers the exit animation, causing various elements to move, fade, and hide the loader upon clicking the trigger element. Ensure that the loader is always set to display: none by default and instantly set to display: flex on page load using CSS, eliminating any page flickering. Additionally, create a function that plays the exit animation upon the completion of the counter animation.

By following the above steps, you can seamlessly incorporate a visually appealing and interactive page loader in your Webflow project. This loader enhances the user experience by providing engaging content while ensuring faster reload times for returning visitors. Experiment with different animations and easing functions to create a unique and compelling page loader tailored to your website's design.

We hope this tutorial has helped you understand how to create a page loader interaction in Webflow. Stay tuned for more tutorials, and happy designing!