After creating the bare bones of a website, I decided to add some simple scroll in animations to various elements. I did this by configuring a few standard quick slide appear animation classes with different delays. e.g. “Speed300” is a slide in from the bottom with a 300 dealy. My theory this would be easy to just add a class to existing elements, then to add and reconfigure interactions settings for each class or element.
I then added these classes to various elements to stagger how they appear when you scroll down.
On my test page, it all worked fine and nothing conflicted. However, when applied to real elements on the home page, each time an element scrolls into view with a various animation class, it retriggers all other elements with that class. e.g. when an element with class “speed300” scrolls into view, all the other elements above it, with class “speed300”, that have already triggered, retrigger.
Not sure if this is me being super stupid but I’m confused why the test page doesn’t do this and the homepage does. Any help would be much appreciated.
My test page is named Scrolling test page, and home page, is home.