Jump to content
GreenSock

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

How to stop tween in timeline?

Recommended Posts

Say you want to tween an element from point A to Z over 10 seconds on a new timeline, but want to stop that tween 5 seconds into the timeline, so that the result is more like a tween from A to M over 5 seconds, but following it's A to Z path over 10 seconds. Any way to kill an element's property tween at a specific point in a timeline?

Link to post
Share on other sites

I figured out a way:

var t = $('#target')
var tl = new TimelineMax()

tl.to(t,10,{left:1000, ease:Linear.easeNone})
tl.set(t,{left:'+=0'},'-=5')

I'm assuming this would work on other animations, like a bezier curve or something (setting an empty bezier object)? Or maybe not. I don't know...

Link to post
Share on other sites

It depends if you want to be able to keep the A to M tween alive for reuse later. Maybe this isn't exactly how you'd want to implement it, but the following might give you an idea:

var aToZ = TweenMax.to(element, 10, { x:100, ease:Power2.easeOut, paused:true });
var aToM = TweenMax.to(aToZ, 5, { progress:0.5, ease:Linear.easeNone });
// this would give an abrupt stop at 'M', but would respect the easing of
// aToZ. If you'd rather aToM have an ease, you can just swap the eases
// between the two. This also keeps the tween alive in case you need to
// rewind or run it again.
If you'd rather the aToZ tween just be killed completely after 5 seconds, you could try something like this:

var aToM = TimelineLite();
aToM.add(TweenMax.to(element, 10, { x:100, ease:Power2.easeOut }));
aToM.call(aToM.kill, [null, element], aToM, 5);
Check these functions out in the API: killTweensOf() kill().
  • Like 2
Link to post
Share on other sites

Ahhh, progress, that's clever, thanks

Link to post
Share on other sites

Actually your solution is not too bad either if you don't mind the abrupt end to the tween. The timeline will be maintained so you can pause and rewind it still.

Link to post
Share on other sites

Thanks, but I'm having a problem with it on a repeating timeline. This seems like odd behavior to me, but maybe it's normal. How would I fix it?

 

See the Pen rsgnH by seraphzz (@seraphzz) on CodePen

Link to post
Share on other sites

Actually scratch that I wasn't thinking straight, the set will overwrite the previous tween so it wouldn't be repeatable/rewindable etc.

 

I think the progress tween might work best for you

See the Pen aIpLh by jamiejefferson (@jamiejefferson) on CodePen

  • Like 1
Link to post
Share on other sites

Well that becomes complicated. Not using progress itself, thanks for that, but the implementation. Doing it that way requires you to know the time (which rules out labels), and computing a matching progress value. My initial tween duration is complicated enough, relying on a computed value, and now I have to match progress to a label to perfectly synch with other animations.

 

So if there's a way to stop it at a label, that's the needed behavior I need for this particular instance. If not, then this seems like missing core functionality. I can think of many uses for this, and killing a tween outside a timeline is already easy and supported

Link to post
Share on other sites

Well what if you tweened time instead of progress? Could you compute that a bit easier?

var aToM = TweenMax.to(aToZ, 5, { time:5, ease:Linear.easeNone });

Figuring out the time shouldn't be too much more than:

var endtime = Math.abs((insertion point for aToM) - tl.getLabelTime('stoptweenhere'));

Link to post
Share on other sites

What I'm doing: I have a div with a scrolling background. Then, I have text scrolling to look like it's affixed to this textured background. Easy enough, just calculate the ratio of background width/time against text transition distance/time(X). But, after the background has scrolled a certain distance, I've applied a label. At this label, the background stops scrolling and the container starts scrolling at the same speed, to make it look as if the background has reached it's end and is continuing to scroll off screen. This is all well and good, but gets complicated here. As the container begins to scroll, some scrolling text is roughly half way through it's transition, which then jumps in speed as it's container moves, no longer appearing affixed to the background image. The text should stop scrolling at the label to fix this

 

This isn't any more relevant to the problem than as I've already described it, and doesn't add anything to the discussion, but I know the developers love examples to visualize the need for an action, so there you have it.

 

I can imagine how much more complicated this problem would become doing something similar with text following a bezier curve or something. The math would become mind numbing, compared to simply stopping the tween at a label on the timeline

Link to post
Share on other sites

Thanks, I didn't know I could tween the time itself, that be what I need. I'll play with that when I get back to work

Link to post
Share on other sites

Thanks. On phone now, will look later. You know, am I missing a tweenable properties reference somewhere? I don't see it in the tweenmax or timeline documentation, and thus far I've had to figure them out from example pages. Any complete list of non-CSS properties anywhere?

Link to post
Share on other sites

There isn't a pre-determined list of properties that GSAP can animate - it can literally tween any numeric property of any object (even method-based ones). But I assume you're talking about css-related special properties like autoAlpha, x, y, rotation, scale, skewX, skewY, etc. and those are all explained in the CSSPlugin docs at http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Is that what you were looking for? 

Link to post
Share on other sites

No, I meant like "time" and "duration". Those are more GSAP specific, and I'm wondering if I'm missing anything else useful that pertains specifically to tweens and timelines. The first place I look for answers is the documentation, and there's no specific section with properties listed. I could have probably figured this problem out myself, but I wasn't looking in the right place to find it. A complete list, minus CSS properties, would be handy, as an index that links to the appropriate section or plugin. The CSS ones are pretty well documented and/or self evident I think. Not a big gripe though, I feel i've probably figured most of them out by now

Link to post
Share on other sites

I'm a fan of indexes. I usually don't remember something until i've used it, so reading a long page that covers it all doesn't really do it for me. You'd be surprised the number of word searches i've run on your site, lol... By the way, any such plans to be able to halt a tween during a timeline without killing the tween (repeats each loop) like this post talks about?

Link to post
Share on other sites

Oh, yeah, there's definitely a list. Have you explored the docs at http://api.greensock.com/js/? Click on "TimelineLite", for example, and scroll down. You'll see a list of methods and properties. There's an index with links to more full descriptions of each and every one. Isn't that what you're looking for? 

Link to post
Share on other sites

Not really Jack. I didn't know "time" was a tweenable property that tweens have. I don't see "duration" either. There's no indexed list that shows those properties, which just makes me wonder what else I might be missing.

 

jamiejefferson

photo-thumb-7401.png?_r=1369147354  Thanks for that Codepen, it worked like a charm. It actually took me awhile to realize the importance of creating it paused, and couldn't figure out why it wasn't working, but I figured it out and it makes sense now. Thanks

Link to post
Share on other sites

I'm confused - I just went to the docs and see the clearly printed index that includes time() and duration(). Maybe the confusion is that they're listed under methods, not properties (because they are indeed methods). Is that maybe what confused things for you? Did you only look under "properties"? 

 

And it should be on by default, but just in case it's not for you, make sure the "Show Inherited Public Properties" option is selected. 

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.

×