jasonbean3000

I have a scrollTrigger on the parent div, and a different scrollTrigger for the child div. I would like the scrollTrigger animations from the parent to not affect the child div Gist of the code...thanks for any help. <div id="parent"> <div class="child"> </div> </div> let parent = gsap.timeline({ scrollTrigger: { trigger: "#parent", start: "top 80%", end: "top 20%", scrub: 2, toggleActions: "restart pause reverse none" } }) parent.to("#parent", { duration: 4, yPercent: 20, // offset by the width of the box opacity: 1, }) let child = gsap.timeline(); child.to("#child", { morphSVG: "#echild", ease: "power3.inOut", yoyo: true, }); ScrollTrigger.create({ trigger: ".child", // The trigger element start: "top 60%", // When to start the animation end: "top 50%", // When to end the animation animation: child, // The timeline to animate pin: true, });