Jump to content
Search Community

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

mheavers test
Moderator Tag

Recommended Posts

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" );

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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

}

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...