Jump to content
Search Community

TweenMax .set() followed by .to() doesn't seem to work with scale

majman test
Moderator Tag

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

Everything seems to to set correctly, and the opacity transition works fine, but nothing happens with scale: 



TweenMax.set(letter, {opacity:.5, scale:.4, transformOrigin:"50% 50%", fill:c});
TweenMax.to(letter, 1, {opacity:1, scale:1, ease:Elastic.easeOut.config(1), delay: i*.1});

I don't think anything too crazy is going on with my code... 

Anybody else run into a similar problem?




Link to comment
Share on other sites



See if characters are set to display: inline-block. If they are just inline span 3D transform can't work on them ( this is not a GSAP issue ). Just set the letters to display inline-block and should work fine. Also, I would recommend you TweenMax.fromTo method to animate them.


Btw yesterday I posted a quick tip how to animate letters with GSAP : http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/


look the demos, they might help you :) http://blog.bassta.bg/demos/tweenmax-text-animations/index3.html here is the demo with scale animation. 

Link to comment
Share on other sites

Thanks Basta, 


I don't think that's the issue - I'm actually applying tweens to svg paths.


I should mention that using from() works totally fine. for example:

TweenMax.set(letter, {css:{transformOrigin:"50% 50%", fill:c}});
TweenMax.from(letter, 1, {scale:0, opacity:0, ease:Elastic.easeOut.config(1), delay: i*.1});

That works as expected. But trying to accomplish the same thing with .to() breaks. 

Link to comment
Share on other sites

interesting results. Unfortunately I don't know a ton about svg, but it seems clear that certain properties in the set() aren't having any impact.


for instance:



You'll see that the skew and scale settings in the set() are not the end values in the next from() tween. But, autoAlpha, opacity, and scale tweening is happening smoothly.


As a side note we have had really fantastic results tweening svg elements and their child path elements as shown here:

See the Pen gpDrC by GreenSock (@GreenSock) on CodePen


This set() thing is definitely worth looking into further.

Will let you know if we come up with anything.

Link to comment
Share on other sites

I looked into this a bit more and confirmed that the browser wasn't returning the correct calculated style on the SVG element's transform. So it's indeed a browser bug. However, I'll implement a workaround in the next release of GSAP that always defaults to the GSAP-set transform values (if they exist) rather than re-parsing the calculated style value that the browser returns. We'll likely push the next release out the first week of June. 

  • Like 1
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.
  • Create New...