Jump to content

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

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.


    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:

  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.