Element on page load – not loading

Hi fellow WF-ers!

I’m working on an Ecommerce page.
I designed a hero/about animation that is supposed to start when the home page is loading, and then disappear after the animation has finished. It seems to work as expected. But…

How can I make it so that the animation only plays
when the two following conditions are met:
a) when the user lands on the home page the very first time
b) when the user clicks the “about” menu button on the home page or other pages within the site

The animation should not play when:
a) the user is already within the site and clicks on the home (logo) link
b) the user scrolls back up on the home page (manually or by clicking the back-up button)

(don’t get confused by the many grid layers – this is still a work in progress)

Thank you for your help!

Here is my read-only link: Webflow - Ornament-is-crime

Hello Raphael!

How comfortable are you with writing javascript?
To check if the user has visited the site before you need to save the information to the users cookies or preferably the localStorage. Then you can check on every successive visit and not show the animation (hide the element).

Do you intend to use the animation as a transition between pages?
Check this guide for some more info:

Hi RDaneelOliwav,

Thank you for your advice!

I’m generally not comfortable with code, even less with writing Javascript.

I use the animation as a pre-loader on the home page, but it also serves as a substitute for an about page (not really as a transition between pages I guess).

  • the animation is a section that sits on top of (and covers) the home page
  • it goes away after the animation has played, or can be clicked away by the user
  1. show the animation on first landing on site/homepage only
  2. show the animation again when clicking on top nav menu item “about”
    It’s kind of contradicting. Essentially when clicking about, it should link to the home-page and pretend you’re landing there the first time.
    I don’t know how else I can explain it. Maybe check out the read-only link?

Thank you Moheen!
I’ll give that a try.
I’m confused though.
Would you mind explaining?
What do the product images have to do with the hero animation?

Thanks again!