mindfailure

How can I trigger a function if a user scrolls more than 50px within a pinned area? Example code for the pinned area: I assume that this would be achieved using onEnter and a function gsap.to(container, { scrollTrigger: { trigger: container, pin: true, onEnter: () => { /** * If scroll more than say 50px * trigger hpNext(); */ }, }, }); Thanks

Thank you, I was over complicating everything, thinking that you'd need to do a forEach on each element...

Hi, Just started to use GSAP and looking at using ScrollTrigger, but I've hit a bit of a snag and can't seem to work out how to do what I'd like. I have a repeating sections, each contain 2 panels, these repeat in every single section Example: <article class="section"> <section class="section__copy"> <h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab labore minus laudantium dignissimos quam est repellendus temporibus vero deleniti tempore voluptatem, at facere dolores minima, velit doloremque atque facilis nisi. </p> </section> <picture class="section__media"> <img src="https://via.placeholder.com/500/000000/FFFFFF/?text=Example" alt=""> </picture> </article> What I'd like to happen is the following Parent section with the class of `section` to fade in (This I have working) the child picture element with the class of `section__media` to move up 300px the child section with the class of `section__copy` to move up 300px The h2 within `section__media` to fade in The paragraph to then fade in From what I currently understand about GSAP, this would be better on a timeline, but I've no idea how to reference the child elements. Codepen: https://codepen.io/robwatson_dev/pen/LYOLowR?editors=0010 Any assistance would be fantastic. Thanks