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

[Gregor3637 1 Likes (Newbie)]

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.

[Carl 11,325 Likes (Superhero)]

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

[Gregor3637 1 Likes (Newbie)]

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

[Carl 11,325 Likes (Superhero)]

 

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)

Get it here: http://greensock.com/gsap-as?download=GSAP-AS3

 

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.

[Gregor3637 1 Likes (Newbie)]

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)