Page load animation

Design help Animations & Interactions
1

Hi everyone,

Looking to find out the best way to have a page load animation on all clickable links. Whether it be clicking “Our Work” in the nav, to clicking on the project tiles on the home screen.

Am I left with setting this up on each of the clickable items? Or is there a way I can have one-page load interaction that applies to all items that are clicked?

I believe I can use the Body to have the interaction on, however, I want to keep the nav bar with no interaction. Is there a way I can exclude the nav bar but include everything else?

**The page load animation is opacity 0 to 100.

Hope this makes sense, I have placed my preview link below.

Thanks in advance

Here is my public share link: https://preview.webflow.com/preview/blankdesignstudio?utm_medium=preview_link&utm_source=designer&utm_content=blankdesignstudio&preview=b02ee02bb6dbed9e5d8fe88961cba0aa&mode=preview

2

Hi Shaun,

you could make use of global classes:

Add a div to your page, give it a class name and add the interaction to it (interaction should be set so that it applies to all elements with this class.

Then simply add the class to any element you want to use the interaction on.

3

Perfect! This has worked a treat. Thanks for your help.