Streaming live at 10am (PST)

"On Page Load" and "Mouse Move Over" Interaction interfering with each other


#1

This is what I want to happen:

  • The “Mountains” in the background animate in from the bottom
  • After they are loaded in, the “mouse move over element” interaction should move the mountains

Now, if I try this with a “Page Load” interaction applied to the individual “mountains”. And a second, “mouse move” interaction on the same “mountains”, the Page Load animation does not trigger properly.
My work-around has been to have two instances of the mountains, one with the “page load” and one with the “mouse move” interaction applied. The first one changes to display:none after the first interaction finishes, and the second one changes to display:block.

It works kind of like I want it to. But, is there a more clean or elegant solution? Something where I don’t have to copy anything? The hero nav animation is also kind of choppy

Thanks for reading and for your reply!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)