changing transform origin

[redrooster]

Hi team,

 

Firstly I just want to say what an awesome product this is - I love it.

 

I was wondering if you could help me out with a problem I am having:

 

I need to change the transform origin of a div I am animating, however when I run the animation, the final value I apply for it is applied immediately - take a look at my code:

	var master = new TimelineMax();

	master.add( sweepIn() )
	      .add( sweepOut() )



	function sweepIn() {
		var tl = new TimelineMax();

		tl.set(sweepAway, {transformOrigin:'left center'});
		tl.set([sweepColour,sweepPlain], {scaleX: 0});
		tl.to(sweepColour, 2, {scaleX: 1, ease: Sine.easeOut});
		tl.to(sweepPlain, 1, {scaleX: 1, ease: Sine.easeOut},"-=1");

		return tl;
	}

	function sweepOut() {
		var tl = new TimelineMax();
		tl.set(sweepAway, {transformOrigin:'right center'});
		tl.to(sweepColour, 2, {scaleX: 0, ease: Sine.easeOut});
		tl.to(sweepPlain, 1, {scaleX: 0, ease: Sine.easeOut},"-=1");

		return tl;
	}

When the animation runs, it adds "transformOrigin:'right center'" from the beginning, when I need "transformOrigin:'left center'" to be applied first, and then change to 'right center'

 

If this is not clear I can setup a codePen.

 

Thanks,

Mark

 

 

[OSUblake]

You can only do that on SVGs at the moment, but you can use the ModifersPlugin to do the same thing.

See the Pen 9ffffe095d164148571c665a2c899843?editors=0010 by osublake (@osublake) on CodePen

[OSUblake]

Just looked at your question again. I guess you weren't asking how to animate the origin. In that case, set immediate render to false in your second timeline. 

http://greensock.com/immediateRender