determine when timeline label has been entered from the reverse direction using scrollTrigger

[mheavers]

Can't seem to find any documentation on this, but hoping there's a relatively easy way to solve it -

 

I'm using scrollTrigger to control a timeline. When a label is entered from the forward direction (scrolling down), I want to trigger one event, but when it is entered from the reverse direction (scrolling back up), I want to trigger another event. The forward direction is easy enough, because of the `onStart` event, but I can't seem to find an `onReverse` event (though I see `onReverseComplete`). I know that I could do an `onUpdate` event of the animation and check the scroll direction, and do some sort of flag to prevent the event from triggering multiple times, but is there a singular event that is fired that would accomplish this more easily?   I saw some documentation for TimelineMax that has an `addCallback` method where you can specify a frame label that triggers the callback, but maybe that has been deprecated or is not usable with GSAP Timeline (I get `addCallback is not defined`)? If it does exist, that would work for my purposes.

 

 

Here's essentially what I want to accomplish:

 

tl.from( ".item1", { 
  autoAlpha: 0, 
  onStart: function(){ 
    //do one thing 
  }, 
  onReverse: function(){ 
    //do another thing 
  },
}, "label1" );

 

[mikel]

Hey @mheavers,

 

You could use the Rich callback system including onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete, and onRefresh.     

 

Here just an example for different durations. It is easy to play different labels.

 

See the Pen JjYgELQ by mikeK (@mikeK) on CodePen

 

I hope I understood your question.
Otherwise, do a reduced CodePen with your case.

 

Happy tweening ...

Mikel

[_Greg _]

Hi!

Please read official documentation about Events https://greensock.com/docs/v3/Plugins/ScrollTrigger

On Demos part of Documantion page you can find official demo with Callbacks 

See the Pen qBdeVJY by GreenSock (@GreenSock) on CodePen

 

[ZachSaucier]

In addition to the resources above, we provide a demo that fires different animations based on the scroll direction: 

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

[mheavers]

Hi - maybe what I didn't make clear is that I want to know when a particular tween within the timeline is triggered, not the whole timeline itself. Notice that the code was a callback on a timeline item. So, essentially using something like ScrollTrigger's "onEnterBack" method:

 

 tl = gsap.timeline({...})

tl.from( ".item1", { 
  autoAlpha: 0, 
  onStart: function(){ 
    //do one thing 
  }, 
  onEnterBack: function(){ 
    //do another thing 
  },
}, "label1" );

 

I want to know when a labeled animation sequence begins occurring in reverse, not simply when the whole scrolltrigger sequence begins occuring in reverse

 

 

[ZachSaucier]

4 minutes ago, mheavers said:

I want to know when a labeled animation sequence begins occurring in reverse

Well, technically the tweens in a scrollTrigger don't go in reverse. The playhead is just moved around which is different. 

 

It would be a lot easier for us to help you achieve your goals if you created a basic CodePen of what you're wanting to happen.

 

[mheavers]

Ok - will do. Might take a bit of time to strip this down enough to put in a codepen.

[ZachSaucier]

5 minutes ago, mheavers said:

Might take a bit of time to strip this down enough to put in a codepen.

You could start the opposite way: Start with our starter pen (linked to in the post above) and then only add things that are relevant to your issue.

[eviljeff]

Hi, I am trying to figure out a similar doubt. Is it possible to know when a timeline label starts/ends?

 

I have a vertical navigation that should react to the timeline labels (for example I have labels "0", "1") and they don't reflect the screen height (like full height panels) or anything similar. It's just a one page scrolling website with multiple sections.

 

This is my ScrollTrigger function

 

ScrollTrigger.create({
  animation: tl,
  trigger: ".page__wrapper",
  start: "0",
  end: "+=400%", 
  scrub: 1,
  pin: true,
  anticipatePin: 1
})

 

and the timeline is a mix of to/from animations

 

const tl = gsap.timeline({paused: true, defaults:{duration: 1, ease:'expo.easeOut'}});
tl.addLabel("start")
  .to(page, {backgroundColor: '#F8C0C6', duration: .5})
  .from(item0content, {yPercent: 120, duration: .5}, "<")
  .addLabel("0")
  .to(item0content, {yPercent: -120, duration: 1, delay: 1})
  .to(item0, {scale: .95, delay: .5, duration: .5})
  .to(item0, {yPercent: -100, duration: .5})
  .to(page, {backgroundColor: 'rgb(210, 227, 203)', duration: .5}, "<")
  .set(item1, {scale: .95, duration: .5}, "<")
  .from(item1, {yPercent: 100, duration: .5}, "<")
  .to(item1, {scale: 1, duration: .5})
  .from(item1content, {yPercent: 120, duration: .5, delay: 1}, "<")
  .addLabel("1");

 

I need the navigation dots to add/remove the active class when the labels enter/leave the timeline on scroll. So for example, on scroll, when the timeline gets to the label "0", the first navigation dot gets the active class and so on. Is that possible?

 

Thanks

[Carl]

2 hours ago, eviljeff said:

Is it possible to know when a timeline label starts/ends?

 

yes, add a callback at the same time as your label using call()

that callback can take an array of parameters that you can use to update your nav.

assuming your nav elements are in an array...

 

// insert your updateNav function call at the "label3" label and pass in index value of 3
tl.call(updateNav, [3], "label3");

next you just have to have your updateNav() function activate the nav element with an index of 3 and de-activate the others.

function updateNav(index) {

  navItems[index] // ...do stuff

}

 

 

 

[eviljeff]

That's great, I didn't know that!! Thank you

 

I love GSAP so much