vueuse / motion

šŸ¤¹ Vue Composables putting your components in motion

Home Page:https://motion.vueuse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

  1. 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?

  2. 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.