Jump to content
Search Community

transform: scale is broken when invoked twice.

agamemnus 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

Hello agamemmnus, and Welcome to the GreenSock Forum!

 

Not sure what you mean scale is broke when invoked twice. .. I do see that your are using native javascript to write the inline transform style.. but then you immediately have a tween run after that which would overwrite that line in your for loop.

  • Are you tryng to just set the initial scale value for each element ? ..
  • and then animate each one back to scale factor one?

If so here is your example modified : http://jsfiddle.net/6ojyt5bq/4/

 

I used GSAP set() method instead of using unfiltered_image.style.transform. By using GSAP to set() the CSS properties, you allow it to  handle all the CSS vendor prefixes for the various modern browsers. And then GSAP can keep track of what properties you are animating!

 

You can also use the property scale instead of using transform: scale(1) directly.

 

More info on GSAP TweenMax and  CSSPlugin found here:

If this does not help can you please provide more information on the exact behavior you expect or want?

 

Thanks! :)

Link to comment
Share on other sites

Ok, I see what is happening.

 

I set transform to scale, not webkit-transform. However, TweenMax is setting both, and my reset statement is not resetting webkit-transform. Is there a flag I can set to prevent this hidden backwards-compatibility? I understand you want to have backwards compatibility, but to hide it is not the right way.

Link to comment
Share on other sites

What is the behavior you are after? ..

 

Do you just want it to start scaled up and then animate scale down to 1, and then jump back to scale 2.5 and then animate scale back down to 1?

 

http://jsfiddle.net/6ojyt5bq/5/

 

I am still confused on how you want it animated. By using set() im letting GSAP record the values.

 

Because if you just do this:

 

unfiltered_image.style.transform

 

You are changing CSS properties outside of GSAP. So that is why i recommended to use GSAP set() method instead, so GSAP can keep track of your changes, and handle cross browser vendor prefixes for CSS properties.

 

http://caniuse.com/#search=transform

  • Like 1
Link to comment
Share on other sites

The issue is related to this note from the docs greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

By default, GSAP records the transform-related data like scaleX, scaleY, x, y, rotation, etc. so that it persists correctly and works around some browser bugs. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

GSAP tracks the values of transforms internally so setting through style causes a small conflict. If you let GSAP handle all applications of transforms then this shouldn't be an issue. If you want to keep the element.style.transform declarations, then you'll need to add parseTransform:true to your tween.

TweenMax.set(unfiltered_image, { scale: 2.5 });
TweenMax.to(unfiltered_image, 1, { scale: 1, ease: Linear.easeOut });

// or

unfiltered_image.style.transform = "scale(" + initial_scale + ", " + initial_scale + ")";
TweenMax.to(unfiltered_image, 1, { scale: 1, parseTransform: true, ease: Linear.easeOut });

// or

TweenMax.fromTo(unfiltered_image, 1, { scale: 2.5 }, { scale: 1, ease: Linear.easeOut });

And since you're using TweenMax, you could really shorten this by adding a repeat and repeatDelay jsfiddle.net/6ojyt5bq/6/

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