With timeline.call(), is there any way to pass the direction to the callback?

[Jake H]

I have a function `showNavBar(show: boolean)`, and I'd like to toggle it at a certain scroll point: passing true going forward, passing false back.  I'd expect to be able to do something like this:

gsap
  .timeline({ scrollTrigger: { /* ... */ } }),
  .to(".foo", { /* ... */ })
  .call(showNavBar, ???);  // Insert solution here ...
  .to(".bar", { /* ... */ });

 

I'm sure I could get this working by using the scroll trigger's onUpdate callback and watching self.progress, but that feels like a hack for a pretty common use case.

 

Is there any one-liner solution?  Apologies if I missed it in the docs.

[Jake H]

I solved this by adding onUpdate to the scroll trigger config:

gsap
  .timeline({
    scrollTrigger: {
      /* ... */
      onUpdate: (self) => showNavBar(self.progress > 0.5),
    },
  })
  .to(".foo", { /* ... */ })
  .to(".bar", { /* ... */ });

Not terrible, but it would be nice to be able to insert the nav bar callback in the timeline.  If there's a more elegant solution, I'd like to hear it.  Thanks.

[GreenSock]

The ScrollTrigger has a direction property that's 1 if the last scroll was forward, and -1 if it was backward. 

 

Sorta like: 

let tl = gsap.timeline({
      scrollTrigger: {
        scrub: true,
        ...
      }
  	});
tl.to(...);
tl.add(() => {
  console.log("direction", tl.scrollTrigger.direction);
});

Notice I'm using add() for the callback just because it's a little simpler than call() which is only useful if you're passing parameters (uncommon). 

 

Is that what you're looking for? 

 

If you're not using a ScrollTrigger at all, there's also a helper function for tracking the direction of an animation: 

https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection

[Jake H]

Thanks, Jack.  I didn't realize that Timeline exposes its ScrollTrigger.  (That would be a useful addition to the docs, if you don't mind my suggesting.)

 

I did try something along those lines, but I used the scroll trigger directly rather than getting it from the timeline.  Like this:

const scrollTrigger = ScrollTrigger.create({ scrub: true, ... });
gsap
  .timeline({ scrollTrigger })
  .to( ... )
  .add(() => showNavBar(scrollTrigger.direction > 0))
  .to( ... );

That didn't work: the timeline stayed stuck at progress = 0 with the above approach.  Is there an expected difference between using ScrollTrigger.create() vs. passing the ScrollTrigger config to gsap.timeline()?  Thanks again.

[GreenSock]

5 hours ago, Jake H said:

I did try something along those lines, but I used the scroll trigger directly rather than getting it from the timeline.  Like this:

That's not valid - you should pass a ScrollTrigger configuration object to the timeline, not a ScrollTrigger instance itself: 

// BAD
let st = ScrollTrigger.create({...});
gsap.timeline({ scrollTrigger: st });

// GOOD
let st = {...};
gsap.timeline({ scrollTrigger: st });

Alternatively, you could do the inverse, where you create the animation and then pass it into the ScrollTrigger.create(): 

let tl = gsap.timeline();
tl.to(...)
  .to(...);

ScrollTrigger.create({
  animation: tl,
  ...
});

Does that clear things up? 

[Jake H]

All clear.  I'm new to GSAP, so thanks for helping me get up to speed.