Jump to content


Can I tie a tween to a changing Y position?

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

Instead of using a time element to run the tween for x seconds, and instead of saying if y = (a number) run tween, I want the tween to be completely tied to the y mouse movement so when I scroll down or up, I can essentially 'scroll' the tween. Basically the tween would be updating every 24 sec or whatever, and running in sync with the mouse movement. so that the tween moves with the y of the mousescroll. Let say I have something like: 


TweenLite.to(element, 2, {scale:1.5, x:10, y:0, alpha:0});


I could say if y == 400 run tween but it would just execute and be finished. But I want this tween to run y 400 to 450, so not use a time element (currently 2sec), but two y positions instead. So then if I moved the y with my mousescroll to 410, 20% of the the tween would have run in sync with my mouse scroll, if I moved the mouse back to 400, the tween would reverse back to the beginning in sync with the mouse movement, if I moved it to 403, a tiny amount of the tween would happen, etc, etc so the tween events always stay in sync with the mouse scroll y. Does this make sense? How would I do this?  Can I do this with greensock?


Link to comment
Share on other sites

Absolutely. The first step is to create your timeline and whatever tweens necessary on it. The key here is set paused: true.

tl = new TimelineLite( { paused: true } );

The second step is to respond to the scroll event; in this example I'm using jQuery to do so


Lastly, you would test if the scrollTop value is within your parameters and apply whatever math makes the most sense to progress the timeline progress from 0 to 1 within those parameters. Something like,

$(window).scroll( function() {
    var st = $(this).scrollTop();
    if ( st < someArbitraryValue ) { // someArbitraryValue, where to start
        // Here, "someOtherArbitaryValue" would be the
        // "height" of the scroll to react to
        tl.progress( Math.abs( st ) / someOtherArbitaryValue );
  • Like 1
Link to comment
Share on other sites

Yup, Shaun is right. You can generate a progress() value for your timeline any number of ways: mouse position, scroll value, with a slider component, etc. 


Here is a very basic implementation of scroll-driven animation: http://codepen.io/adrianparr/pen/mbrqt


A few things to note.


  1. If you are going to roll your own solution, be careful with scroll events. They fire many many many times. Its probably best to throttle the scroll events as discussed here: http://greensock.com/forums/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/?p=35063 Demo: http://codepen.io/GreenSock/pen/ulrJD?editors=001
  2. If you want to trigger animations at certain scroll points, you should probably just use ScrollMagic: http://janpaepke.github.io/ScrollMagic/ and be sure to read all of Petr Tichy's tutorials: https://ihatetomatoes.net/simple-scrollmagic-tutorial/
  • Like 1
Link to comment
Share on other sites

Thank you both! Super helpful. I'm wanting to implement this in Pixi.js. I love Greensock so it's a natural way for me to go.

Carl ScrollMagic looks amazing!  What do you think it's benefits are over skrollr.js?

Link to comment
Share on other sites

The big advantage of ScrollMagic is that it allows you to write your animations using GSAP.

Link to comment
Share on other sites

  • 2 weeks later...

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.