Tween within Timeline positions Object if Tween if initialized

[Eckstein1]

Hi,

 

this is a simplified example of the problem I have.

 

First I create a circle and place it at (0/0). Then I create a timeline.

 

The timeline includes two bezier curves. Each bezier has a FROM(x/y) and a TO (bezier). Before tweening along the beziers the timeline waits for 2 seconds.

import com.greensock.*;
 
var m1:MovieClip = new MovieClip();
m1.graphics.beginFill(0xffcc00, 1);
m1.graphics.lineStyle(1, 0xffcc00, 1);
m1.graphics.drawCircle(0, 0, 10);
m1.x=0, m1.y=0;
addChild(m1);

var TIMELINE:TimelineMax=new TimelineMax({repeat:-1});
TIMELINE.add(TweenMax.fromTo(m1, 5, {x:100, y:400}, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}), 2);
TIMELINE.add(TweenMax.fromTo(m1, 5, {x:500, y:400}, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}}), 7);

What i observe is that because of the FROM within the tweens to circle is immediatelly moved to the last FROM of the added tweens. So in this example to circle is initially positioned at (500/400) instead of (0/0) where it in my understanding should be.

 

The positioning based on the timeline should not be done while initializing the timeline. It should happen if the corresponding tween is played by the timeline.

 

Kind regards,

Uli

[Carl]

Try adding immediateRender:false to the second tween

 

TIMELINE.add(TweenMax.fromTo(m1, 5, {x:500, y:400}, {immediateRender:false, bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}}), 7);

[Eckstein1]

Thanks Carl,

 

you are correct if I add this attribute it works as it should. I also have to add it to the first tween otherwise it will position at (500/400).

I can find this problem only if I use beziers. It does not occur for other tweens.

 

So I propose to set "immediateRender=false" by default if a bezier tween is added to a timeline. Otherwise it has to be done manually evertime a bezier tween is added to a timeline. At least a hint should be shown in the documentation.

 

Again thanks and kind regards,

Uli

[Carl]

Thanks for the suggestion.

immediateRender is set to true for all from-based tweens.

 

After further investigation, I think the root of the problem is most likely incorrect usage of fromTo().

 

fromTo() tweens are supposed to have matching properties in the from and to vars.

 

Correct (matching properties x and x)

TweenLite.fromTo(mc, 1, {x:20},  {x:100})

Incorrect (un-matched properties x and opacity)

TweenLite.fromTo(mc, 1, {x:20},  {opacity:1})

In your cast you are setting x and y in the from vars and the to vars have plugin-based values. Sure it happens to work ok-ish, in your case, but its not recommended. 

 

I believe this code will give you the results you want

import com.greensock.*;
 import com.greensock.plugins.*;
 TweenPlugin.activate([BezierPlugin]);


var m1:MovieClip = new MovieClip();
m1.graphics.beginFill(0xff0000, 1);
m1.graphics.lineStyle(1, 0xffcc00, 1);
m1.graphics.drawCircle(0, 0, 10);
m1.x=0, m1.y=0;
addChild(m1);


var TIMELINE:TimelineMax=new TimelineMax({repeat:-1});


TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}, 2);
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}});

If you want mc to start somewhere other than 0,0, you can add a set() to the beginning of your timeline

 

TIMELINE.set(m1, {x:50, y:50});
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:100,y:400}, {x:200,y:200}, {x:250,y:250}, {x:240,y:400}, {x:490,y:220}, {x:500,y:400}]}}, 2);
TIMELINE.to(m1, 5, {bezier:{type:"soft", values:[{x:500,y:400}, {x:833,y:324}, {x:424,y:795}, {x:250,y:250}, {x:115,y:613},{x:100,y:400}]}});

Come to think of it, I don't think BezierPlugin should be used at all with a from() or fromTo() tween because you really can't tween from a path to another path, make sense?