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!