ScrollTrigger end point and opacity

[arual]

Hi everyone,

Is it possible to end trigger when the element reaches another container (to create an overlapping effect) ? 

E.g. end: ".newContainer"

 

Also, is it possible that while on scrolling the element to be transparent and when it reaches the end point the opacity to be set to 1?

 

Thanks!

[akapowl]

Hey @arual

 

This sounds like you want to take a look at endTrigger in the docs.

 

endTrigger

String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

[arual]

9 minutes ago, akapowl said:

Hey @arual

 

This sounds like you want to take a look at endTrigger in the docs.

 

endTrigger

String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

Yes, I read this but I didn't figure it out. Please se my code below:

gsap.to(".hero__image", {
  xPercent: 40,
  scrollTrigger: {
    trigger: ".hero__image",
    start: "center center",
    pin: true,
        endTrigger:".hero__end",
    scrub: true
  }

[akapowl]

Maybe you just need to define a proper end alongside your endTrigger to make it end where you want.

 

But it's pretty hard to tell from just a code-snippet - a minimal demo would really help us helping you.

 

In this example I also included a way to show how to make your element lose its transparency when it reaches its destination.

 

See the Pen 54e828a06191c5fe84f34c1795acb7e8 by akapowl (@akapowl) on CodePen

[arual]

19 minutes ago, akapowl said:

Maybe you just need to define a proper end alongside your endTrigger to make it end where you want.

 

But it's pretty hard to tell from just a code-snippet - a minimal demo would really help us helping you.

 

In this example I also included a way to show how to make your element lose its transparency when it reaches its destination.

 

 

 

This is perfect. Thank you very much. I really appreciate your help!