Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alexb148

How to call a function using a ScrollTrigger

Recommended Posts

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.

Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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

Link to post
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.

×