Scale animation works only once

[MT]

I have wasted hours trying to figure out why my animations don't work:

 

This is a little bit frustrating. Find a simple example.

 

 

Thank you!

See the Pen xgdejr by anon (@anon) on CodePen

[OSUblake]

What's supposed to happen?

[GreenSock]

I assume this is what you want?:

http://codepen.io/anon/pen/GrmLVe?editors=0010

[MT]

No,

 

I want the opacity to have a different animation duration.

 

Opacity a duration of 0.3 and Scale a duration of 0.6

 

When animating separately the scaling fails!

 

I am supposed to animate an element different ways no ?

[MT]

The animation works only once! After that only the opacity works!

[MT]

TweenMax.to is broken!

 

If I use

 

  TweenMax.fromTo( _blue, .3, { opacity: 1 }, { opacity: 1, ease:Quad.easeOut   } );
  TweenMax.fromTo( _blue, .6, { scale: 1.2 }, { scale: 1, ease:Quad.easeOut   } );

 

It works!

 

Why doesn't TweenMax.to work ?

[GreenSock]

TweenMax.to() does work. I think the problem was that you were trying to set the transforms in different ways - with jQuery initially and then GSAP. For performance reasons, GSAP caches transform-related values so that it's super fast to lookup on subsequent animations, but you were circumventing GSAP and using jQuery. You can tell GSAP to force the parsing of the transform (again) rather than using the cached values by just setting parseTransform:true in your tween. Does that clear things up? I'd definitely recommend always using GSAP to do transform-related stuff. It's much faster than jQuery and allows independent control of each transform component (x, y, rotation, scaleX, scaleY, skewX, skewY, etc.). 

[MT]

Hi Jack, Please don't take what I am saying the wrong way: Sometimes people forget to always read the new improvements! So if you are caching the values you should have a fail safe.

 

How should I know that I need to set: 'parseTransform'? I don't know when this property was introduced but some of us are so old here that, I for one, forget to read all of your features. If one catches my eye and I need it I am reading about it.

 

Setting 'parseTransform' is a first for me. I knew that I can scale and I tried to do that.

 

I set the

 

TweenMax.to( _blue, .6,{ css:{ scale: 1 }, parseTransform: true, ease:Quad.easeOut } );

 

and still doesn't work!

[MT]

Ok. So parseTransform is inside the css:{ scale: 1, parseTransform: true } and it works.

[MT]

Can I set a TweenMax global setting to always parseTransform?

 

I see that I need to learn to always use: TweenMax.fromTo.

[GreenSock]

No, it's generally a bad idea to just always parseTransform - it hurts performance. The **ONLY** time you'd ever want to use parseTransform is if you're going against the best-practice and manually setting transform-related stuff OUTSIDE of GSAP. Is there any particular reason you're using jQuery to set that instead of GSAP (like with a TweenMax.set())? 

 

And no, you rarely need to use .fromTo(). The beauty of the .to() method is that it'll automatically figure out the starting values dynamically for you (whatever they are at the start of the tween). That's almost always what people want. But if you use a fromTo(), it requires that you set both the starting and ending values. That's ideal if you're wanting to make it jump from its current value to some other place before starting to tween. But that's relatively uncommon from what we've seen.