Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Different Speed for Reverse Animations #141

Closed
wondergiant opened this Issue · 2 comments

2 participants

wondergiant Jan Paepke
wondergiant

I was curious if anyone has found a way to change the speed of animations when scrolling up?

For Example:
I have a box that animates in for 4 seconds. On reverse I want it to animate out in 1 second.

What I have tried to far is:

  • Check which way we are scrolling, and change the 'duration' in the Tween (unsuccessful)
  • Check which way we are scrolling and change the 'timeScale' of the TimelineLite (unsuccessful)

Here is an oversimplified version of my timeline code:

var tl = new TimelineMax ({timeScale:10});
tl.append([ TweenMax.fromTo( $('#box'), .5, {left:0}, {left:400}) ])
controller.addTween('#box', tl, 0, 0 );

It almost feels like SuperScrollorama ignores any timeScale properties, and that once a TimelineLite has been added to the controller, it can't be updated.

Any ideas?

wondergiant

It never fails. As soon as you post for help you figure it out.

In my function that tests which direction you are scrolling, I was setting the timeScale property incorrectly. Here is a rough idea of how to change the timescale when scrolling up/down.

// Define the timeline
var tl = new TimelineMax ({timeScale:0});
tl.append([ TweenMax.fromTo( $('#box'), 4, {left:0}, {left:400}) ])

// Check which way you are scrolling
var lastScrollTop = 0;
$(window).scroll(function(event){
       var st = $(window).scrollTop();
       if (st > lastScrollTop){
           // down code
           tl.timeScale(1);
       } else {
          // up code
          tl.timeScale(4)
       }
       lastScrollTop = st;
});

// Add your timeline to the scrollorama controller
controller.addTween('#box', tl, 0, 0 ); // scroll duration, offset, reverse
Jan Paepke
Collaborator

Hi wondergiant,

thanks for sharing your solution! :)
I will keep this in mind when continuing work on ScrollMagic.

thanks & regards,
Jan

Jan Paepke janpaepke closed this
Jan Paepke janpaepke self-assigned this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.