Jump to content
GreenSock

Gregor3637

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

Go to solution Solved by Carl,

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

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.

post-37406-0-49936400-1455607626_thumb.jpg

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.

  • Like 1
Link to comment
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

  • Like 4
Link to comment
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

Link to comment
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)

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.
  • Like 1
Link to comment
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)

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.
×