Can anyone assist with setting up a loader animation in Webflow that only plays the first time someone opens the homepage?

To set up a loader animation in Webflow that only plays the first time someone opens the homepage, you can follow these steps:

1. Create the loader animation:

• In your Webflow project, go to the page where you want the loader animation to be displayed (e.g., the homepage).
• Add a new section or div block where you want the loader to be placed.
• Add a div within this section or div block and give it a class name (e.g., "loader").
• Style this loader div to contain your desired animation, such as a spinning icon or a progress bar. You can use Webflow's built-in interactions or custom CSS animations.

1. Set up an interaction:

• Select the loader div and go to the Interactions panel.
• Create a new interaction and give it a name (e.g., "loader-animation").
• Set the Trigger of this interaction to "Page Load".

1. Create a custom attribute:

• With the loader div still selected, open the Settings panel on the right.
• Scroll down to the "Custom attributes" section and click "Add custom attribute".
• In the name field, enter "data-animation-played" (or any other name you prefer), and leave the value field empty.

1. Configure the interaction:

• In the Interactions panel, select the "loader-animation" interaction.
• Add a new step to the interaction by clicking the "+" icon.
• Select "Set Attribute" as the action type.
• In the "Element to affect" field, choose the loader div.
• In the "Attribute name" field, enter "data-animation-played".
• In the "Value" field, enter "true".

1. Hide the loader:

• With the loader div still selected, go to the Style panel.
• Add a new combo class and name it something like "hide-loader".
• In this combo class, set the display property to "none".

1. Create a page load trigger:

• On the homepage, select the body element.
• Go to the Interactions panel, create a new interaction called "page-load-trigger".
• Set the trigger to "Page Load".
• Add a new action and choose "Add class" as the action type.
• In the "Element to affect" field, choose the loader div.
• In the "Class to add" field, enter "hide-loader".

1. Apply the page load trigger:

• With the body element still selected, go to the Style panel.
• Add a new combo class and name it something like "no-loader".
• In this combo class, uncheck the "Visible" property to hide the entire page on load.
• Apply this combo class to the body element.

Now, the loader animation will only play the first time someone opens the homepage because of the custom attribute "data-animation-played". After the animation is played, the "hide-loader" class is added to the loader div, hiding it. The "no-loader" combo class applied to the body element ensures that the entire page remains hidden until the page loads completely.

Additional Questions:

• How to create a loader animation in Webflow?
• Can I use custom CSS animations in Webflow?
• What are the different types of triggers available in Webflow interactions?