Trigger animation based on visibility of another element
russellbrown opened this issue Ā· comments
Thank you very much for creating this. I have two related questions so I hope you don't mind me posting both in the same issue.
-
is it possible to control when the animation is triggered, e.g. when the element reaches the top/centre of the viewport as opposed to when it enters the bottom? And / or perhaps some kind of
offset
feature, e.g. when the element has been scrolled 300px into view, or when it reaches 100px from the top of the viewport? -
is it possible to trigger an element's animation based on the visibility / trigger point of another element? I'm thinking along the lines of the
anchor
setting in AOS.js.
Putting these two together, I have a situation where I have multiple elements all positioned at various vertical points in a section and I would like to trigger all their animations at the same time when the top-most item approaches the top of the viewport. Otherwise the animation looks staggered which isn't the look I'm aiming for.
Many thanks.