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

[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,

});

 

 

[Rodrigo]

Hi @jasonbean3000 and welcome to the GreenSock forums!

 

There is not a lot that we can do without a minimal demo.

 

For what I can see in your code there are a few things I can see. You are animating the yPercent of the trigger element, that is not recommendable unless you are completely aware of the effects it will have in the start/end points. Moving the parent element on the Y axis will inevitably affect when the ScrollTrigger animation of the child runs. That's not a GSAP problem, just the way it works in the terms of when a specific point of the trigger element gets to some point in the viewport. On top of that the child seems to be an SVG element, so that element resides inside an SVG canvas that has it's own coordinates system.

 

Finally in your parent ScrollTrigger config you have both scrub and toggleActions. Both are not going to work together, it's either one or the other. In your child timeline you have yoyo but no repeats, yoyo works only when the animation is repeated more than once.

 

Happy Tweening!