[Disable the scrollTrigger from the parent div, so it doesn't affect the child div]

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,

});