# Transition object from point A to B and changing properties in between

Moderator Tag
Go to solution Solved by Carl,

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

Hello.

I have this Object (a regular cube) that I need to move from point A to point B and while doing that I need to change its scale properties. Let me show you what I mean.

And the task gets even worse when I need to revert the animation after that. What I mean is :

1    - move Object from point A to point B
1.1 - at p.A, Object has scale = 1;
1.2 - at p.AB/2 (when you reach half the distance)  the Object also needs to be scaled x2 (which scale transition needs to be fluent and too)
1.3 - at p.B Object has scale = 1;

2    - move Object from point B to point A (revert the above)
2.1 - at p.B Object has scale = 1;
2.2 - at p.AB/2 (when you reach half the distance)  the Object also needs to be scaled x2 (which scale transition needs to be fluent and too)
2.3 - at p.A, Object has scale = 1;

I was thinking of using:

`TweenMax.to(object, duration, {x:B, onUpdate: fluentlyScale });`

where fluentlyScale is a function that will handle subsection steps .2 (at p.AB/2 the Object also needs to be scaled x2), but .... how do I tell it when the object has reached the middle point in which the scale has start decreasing.

I also thought of an option where I use more then one TweenMax function, something like this

```TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true});
TweenMax.to(object, duration, {x:B, onComplete: reverseEffect, repeat: 1, yoyo: true, });

function reverseEffect() {
TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true});
}```

but.... first: It doesnt quite look like the right way
and second: when will the onComplete trigger? after the repeat and yoyo effect have been applied or before that ?

i.e. onComplete will trigger when Object has reached point B or when it has returned to its point of origin (pointA).

Any help will be gladly appreciated.

• 1
##### Share on other sites

• Solution

Thanks for the detailed description. I think a timeline with 2 tweens (one for x and one for scale) that start at the same time will give you what you want:

```var tl = new TimelineMax({repeat:1, yoyo:true});

tl.to(".red", 1, {x:500, ease:Linear.easeNone})
.to(".red", 0.5, {scale:2, repeat:1, yoyo:true, ease:Linear.easeNone}, 0);```

http://codepen.io/GreenSock/pen/MKxRqV?editors=0010

• 4
##### Share on other sites

Thank you for the clean solution dear sir

but ....Well I guess I have to spill out my secret evil plan now  .
The question is regarding a AS3 (Flash) project and Im not quite sure you can do chaining in the way you did here. ( tl.to(..........).to(.....) )
....I might be terrible wrong or Im not doing something quite right.

I asked the question here because of :
​- the JavaScript part of the forum is far more answered (has more attention to it) then the AS3 part
- the two languages are very similar and I also have a little bit of experience with JavaScript (but not as much as to use freely chaining), so I was hoping it to be just "copy/Paste"

Sorry for the inconvenience

Will it be possible if you provided an AS3 solution ? if its not to much to ask .

PS: the good part is ... that if someone stumbles upon this problem in JavaScript, there will be an answer already

##### Share on other sites

You can still post in our Flash forums. Yes things are very slow over there but I think you will find that all questions get addressed: http://greensock.com/forums/forum/3-gsap-flash/

The good news is that the JavaScript code I provided will work the same with GSAP in AS3.

Just make sure you are using version 12 (which has been out for about 4 years)

the only thing you need to change in the code is that the target will be a displayObject instead of an html element like

```var tl = new TimelineMax({repeat:1, yoyo:true});

tl.to(myMovieClip, 1, {x:500, ease:Linear.easeNone})
//if you don't have the ScalePlugin loaded you will need to do scaleX and scaleY separately
.to(myMovieClip, 0.5, {scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone}, 0);```

Here are the dos for v12 AS3: http://greensock.com/asdocs/

check out TimelineLite's to() method.

if you are new to timelines be sure to study this: http://greensock.com/position-parameter. Again, it's JavaScript but the exact same syntax and principles apply.
• 1
##### Share on other sites

Well sadly Im trying it and it doesnt want to work,.... I created a new Topic addressing this issue and another question in here (link). If you have any spear time (and nerves)