Jump to content


changing transform origin

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

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.






Link to comment
Share on other sites

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. 


  • Like 5
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.