Jump to content
Search Community

GSAP & ScrollMagic, animation reversing when scrolling up

paultrotter50 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm just getting started with GSAP and so far it looks great. I've hit a difficulty using it with ScrollMagic. I'm playing a GSAP timeline to animate an SVG of a van exhaust, when the van being ing the middle of the screen is detected by ScrollMagic. In the pen scroll down to find the van and see the animation. Then scroll up and you should see the animation reverse before stopping. I can see how this behaviour would be desirable in some circumstances, but I wish to know how to avoid it here. Thanks :)

See the Pen ZKEErZ by paultrotter50 (@paultrotter50) on CodePen

Link to comment
Share on other sites

Hi paultrotter50,


Welcome to the GreenSock forum.


Even though ScrollMagic is made with GSAP it is not made by GreenSock.

All bug or issue requests are welcome on: https://github.com/j...ollMagic/issues


Your issue can be handled with reverse: false in the constructor generally or if it should be in a special scene - see comments forked pen: 

See the Pen mmdJjy?editors=1010 by mikeK (@mikeK) on CodePen



If you use TimelineMax you can profit from the feature repeat and keep the tween more simple (see pen ).


Hopefully it helps ...


Kind regards


Link to comment
Share on other sites

HI paultrotter50  :)


Welcome to the GreenSock forums.


With a repeating timeline you want to trigger and repeat infinitely, I'd recommend starting the timeline in a ScrollMagic start event. You would need to pause your 'exhaust' timeline when you create it and then trigger it like this:

var scene = new ScrollMagic.Scene({ triggerElement: "#van" })
 .on('start', function () {

Here's a fork of your pen with that solution.


See the Pen KmKNKM by PointC (@PointC) on CodePen


Hopefully that helps.


Happy tweening and welcome aboard.


  • Like 2
Link to comment
Share on other sites

Hi  paultrotter50 ,


another possible way: 

  • to illustrate the effect the trigger space is limited (#duration: '100px' = end 1)
  • you need the plugin addIndicators.min.js and to add .addIndicators() to show start, end and trigger points

After you leave the end point a func sets exhaust to alpha 0.


Forked pen:  

See the Pen rmNQqg?editors=1010 by mikeK (@mikeK) on CodePen


Best regards


  • Like 3
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...