A question for ScrollTrigger - onLeave, onEnter, etc

[Nelou]

Hello everyone,

I've been looking around the docs, but I don't seem to find the answer.

 

We do have a way to trigger js with "onLeave" "onEnter" etc, but is there a parameter in scrolltrigger that would let us use js at 50% of the scrolltrigger ?

let tl = gsap.timeline({
    scrollTrigger: {
        trigger: trigger,
        start: 'top top',
        end: 'bottom bottom',
        onEnter: () => {},
      	???: () => {
  			//here i'd need to use js at, let's say, halfway through the ST
		}
        onLeave: () => {}
    }
});

or do I need to create a specific ST for that specific value ?

 

Thanks a lot for your help,

 

Best regards,

 

Nelou

[PointC]

I'm not sure I follow the question, but it sounds like you may be looking for the the isInViewport() method.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()

 

If not, a minimal demo would be helpful. Thanks.

[Rodrigo]

Hi,

 

Actually there is no callback for onMidPoint or something like that. If you want to do something mid-way through the ScrollTrigger instance there are a few options:

1. Use the onUpdate callback and check the progress of the ScrollTrigger instance:

   ScrollTrigger.create({
     start: "top top",
     end: "+=100%",
     onUpdate: (self) => {
       if (self.progress === 0.5) {
         // Do something here
       }
     },
   });

   But that could be a little overkill, since you'd be running that particular logic on every update so it could become expensive.

2. Use a timeline (like you're doing right now) and add a call method midway through the timeline using the position parameter:
    

   let tl = gsap.timeline({
     scrollTrigger: {
       trigger: trigger,
       start: 'top top',
       end: 'bottom bottom',
       onEnter: () => {},
       onLeave: () => {},
     }
   });
   tl
     .to(/* animation */)
     .to(/* animation */)
     .to(/* animation */)
     // At the end of the timeline, after adding all the animations
     .call(() => {
       /* This will executed midway through the timeline */
     }, null, (tl.duration() / 2));

There might other ways but they could be more complicated than this. I'd go with the timeline approach.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Or just create another ScrollTrigger that is situated there. For example: 

ScrollTrigger.create({
  trigger: el,
  start: "center center",
  onEnter: () => console.log("hit going forward!"),
  onLeaveBack: () => console.log("hit going backward")
});

 

[Nelou]

15 hours ago, Rodrigo said:

Hi,

 

Actually there is no callback for onMidPoint or something like that. If you want to do something mid-way through the ScrollTrigger instance there are a few options:

1. Use the onUpdate callback and check the progress of the ScrollTrigger instance:

   ScrollTrigger.create({
     start: "top top",
     end: "+=100%",
     onUpdate: (self) => {
       if (self.progress === 0.5) {
         // Do something here
       }
     },
   });

   But that could be a little overkill, since you'd be running that particular logic on every update so it could become expensive.

2. Use a timeline (like you're doing right now) and add a call method midway through the timeline using the position parameter:
    

   let tl = gsap.timeline({
     scrollTrigger: {
       trigger: trigger,
       start: 'top top',
       end: 'bottom bottom',
       onEnter: () => {},
       onLeave: () => {},
     }
   });
   tl
     .to(/* animation */)
     .to(/* animation */)
     .to(/* animation */)
     // At the end of the timeline, after adding all the animations
     .call(() => {
       /* This will executed midway through the timeline */
     }, null, (tl.duration() / 2));

There might other ways but they could be more complicated than this. I'd go with the timeline approach.

 

Hopefully this helps.

Happy Tweening!

Hello !

 

2. is the solution I'm after.

 

Craig, Jack, Rodrigo, thanks for your time, you guys are awesome !

 

Have a good day.