Jump to content
GreenSock

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

Interrupt a tween and ease to stop?

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 used to accomplish this in AS and trying to figure out if there's and easy way to do this using JS + GSAP.

 

Lets say I have a long image that I am scrolling horizontally. If I set the end coordinate, I can CLICK on an arrow and use TweenMax.to to scroll from x:0 to x:endpoint.

 

Easy enough.

 

But if I want to control the scrolling using MOUSEOVER instead... I could still set the same endpoint, etc. But if I roll OFF of the arrow, is there a way I can interrupt the tween + easing, and ease to a stop?

 

UpdateTo allows me change the endpoint, but doesn't seem to allow me to interrupt the tween and basically reverse it so the movement ends smoothly.

 

Using linear easing is no problem. But I'd really like to try to accomplish this using easeInEaseOut.

 

Thanks for any suggestions!

  • Like 1
Link to comment
Share on other sites

Hi,

 

I don't know exactly what you mean about reversing the tween in the context of the rest of your description.

 

The part pertaining to dynamically slowing down a tween is a great question and one that can be handled quite easily with GSAP JS.

 

The trick is to tween the timeScale of the tween that is moving your image.

 

Here is an example:

 

 

var img = $('#imgHolder');

//the tween that will move the image
var imgTween = TweenLite.to(img, 7, {css:{backgroundPosition:'-1750px'}, ease:Linear.easeNone});

//init the timeSale() at 0
imgTween.timeScale(0);

//accelerate by tweening timeScale() to 1
img.mouseover(function(){
   TweenLite.to(imgTween, .5, {timeScale:1});
});

//declerate by tweening the timeScale() to 0
img.mouseout(function(){
   TweenLite.to(imgTween, 1, {timeScale:0});
});

 

Instead of telling a tween to play() or pause(), you create a new tween that tweens the timeScale() of the tween that is moving the image.

 

You can see it in action here: http://jsfiddle.net/geekambassador/WccmB/

 

Just mouseover and mouseout the image a few times. You will see that it accelerates and decelerates smoothly. In essence you are tweening a tween which is a feature that many engines don't offer. Lot's of possibilities.

 

 

 

 

  • Like 1
Link to comment
Share on other sites

WOW! Thats exactly what I meant. Never thought of approaching it like that. Thanks SO MUCH! Can't wait to try it out!

Link to comment
Share on other sites

I replied too soon... should have tried it first. THIS IS SICK COOL! Had no idea I could tween the timeScale property. Thanks again, Carl!!!

  • Like 2
  • Haha 1
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.
×