How to call a function using a ScrollTrigger

[alexb148]

I'm building a site using lots of ScrollTrigger animations.

 

There are some places where all I want to do is simply use a trigger to fire off a function when the user gets to a point on the page. Is this possible?

 

I almost always use timelines (to keep everything consistent, and so that I can easily kill them if I need) so my instinct is to do something like this:

 

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#myTrigger',
    start: 'top 80%',
    toggleActions: 'play null play null'
  }
});
tl.add(function () {
  console.log('do something');
});

But this doesn't do anything.

 

I've noticed that if I add something else to the timeline, e.g.

 

tl.fromTo(
  '#myElement',
  0.1,
  {
    opacity: 0
  },
  {
    opacity: 1
  }
);

Then my function does get called, but only once - it doesn't seem to respect the toggleActions.

 

Is there a simply way to just call a function using a ScrollTrigger? Thanks.

[ZachSaucier]

Hey alexb148. ScrollTriggers callbacks are perfect for this sort of thing. For example:

ScrollTrigger.create({
  trigger: elem,
  onEnter: myEnterFunc,
  onLeave: myLeaveFunc,
  onEnterBack: myEnterFunc,
  onLeaveBack: myLeaveFunc
});

 

[alexb148]

Thank you, I hadn't spotted those options in the docs - yes this does the job. Thanks for the rapid reply!

[TBWA-NY]

Hello! 
Is there a way to pass an argument to a ScrollTrigger callback?
Nevermind.. I see you have to wrap it in another function.

onEnter: function(){ logRed("onEnter"); },
or 
onEnter: () => logRed("onEnter"),

Thanks,

Travis