Jump to content


using repeat:-1 with relative values in Tweens

Moderator Tag

Recommended Posts

Simple newbie question, I fear: I wanted to start an object moving, say, right in x until I stop it. I was hoping I could use something like:

TweenMax.to(mc, 1, {x:"10", repeat:-1});

I was surprised to see that mc would move 10 to the right, then go back to its original position, then move 10 to the right again. Wouldn't it move 10 pixels to the right of its new position at the end of the tween, over and over again, essentially animating right 10 px per second?

Why would I want to do this, rather then simply incrementing mc.x in an enterframe function? I dunno - I was thinking that you could make a timeline where the first Tween eased into an x velocity then the second kept that velocity smoothly until you stopped the tween...

Link to comment
Share on other sites

(Replying here just so I can get notified of the answer you get.)


PS: Mr. Sock, I only now discovered relative positions via values in quotes while searching for something else. Is there a list of "hidden gems" like this posted somewhere?

Link to comment
Share on other sites

Mr. Sock, I only now discovered relative positions via values in quotes while searching for something else. Is there a list of "hidden gems" like this posted somewhere?

Sure. http://www.greensock.com/tweening-tips/

Plus there are a bunch of learning resources at http://www.greensock.com/learning/


As for the question here, I'd like to point out that there's a distinction between having a tween repeat and re-instantiating a tween to run again. When a tween initializes, it records the starting and ending values so that it can properly repeat and calculate ratios on the fly, etc. Imagine the following tween:


TweenMax.to(mc, 1, {x:"20", y:100, repeat:-1});


Let's say mc.x and mc.y start at 0 before this tween starts. At the end of the tween, x will be 20 and y will be 100 (of course). When it repeats, what would you expect mc.y would do? It would of course go back to 0 because that's what it was when the tween started. The same goes for x. If it treated the relative value differently and just kept moving it further and further across the screen, I'd get all sorts of unhappy users telling me there's a bug in TweenMax because when the tween repeats, it isn't going back to the starting values. "repeat" kinda implies reverting to the start values when it repeats.


That being said, you can easily get the results you're after by tucking your tween into a function that you call in your onComplete to make it a neverending loop that just keeps creating new relative tweens:


function tweenScroll(target:DisplayObject):void {
   TweenMax.to(target, 1, {x:"10", onComplete:tweenScroll, onCompleteParams:[target]});


Make sense?

Link to comment
Share on other sites

Hi Jack,

Thanks for the prompt reply! Yes I guess it does make sense, and the workaround would give me what I want. I was looking at your code for your slideshow and I see that you do this to get a continuous scroll:

private function _enterFrameHandler(event:Event):void {
		if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
			if (this.mouseX < _SCROLL_AREA) {
				_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
				if (_destScrollX > 0) {
					_destScrollX = 0;
				TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
			} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
				_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
				if (_destScrollX < _minScrollX) {
					_destScrollX = _minScrollX;
				TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});

Interesting approach - I would think that restarting the Tween over and over again with the default easing would make it lurch slightly, but the thumbnail container moves smoothly. Hmmm, I guess since the restart is called on an enterframe event it only gets rendered once (and despite the fact that it would take 15 frames to play the tween at 30fps if it wasn't restarted) Why did you pick .5 as the timing? I take it that you just played with the timing number and the _SCROLL_SPEED to come up with something that looked right -its not easy to tell what your speed is, right? I set the time to 0 so that my scroll velocity was actually _SCROLL_SPEED, but I have a feeling that you picked that .5 number for a reason...

Just trying to understand better how it all works under the hood a bit.


Link to comment
Share on other sites

Why did you pick .5 as the timing?

I just chose 0.5 because I I wanted it to ease into place over the course of 0.5 seconds at the end. Like when the user scrolls all the way to the end, I didn't want it to just suddenly stop. I wanted it to ease. There's no magic to the 0.5 though. I figured it'd be frustrating if it took like 5 seconds to ease into place at the end, you know? :)

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.