Jump to content
Search Community

Function-based values

Frederic Gontier 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,

I am playing with the Function-based values and I don't understand the following:

If scale is before x, everything works fine, the boxes are scaled proportionally:

 

TweenLite.to(".box", 1, {
  scale: function() {
    return Math.random();
  },
  x: function() {
    return Math.random() * 300;
  }
});
 
But if x is first, the boxes are not scaled correctly:
TweenLite.to(".box", 1, {
  x: function() {
    return Math.random() * 300;
  },
  scale: function() {
    return Math.random();
  }  
});

Thanks,

fred

See the Pen qqLaZP by fr3d3ric (@fr3d3ric) on CodePen

Link to comment
Share on other sites

Very interesting. Thanks for reporting this. It had to do with some complexities in the way transforms are parsed and set. Without boring you to tears with a long explanation, basically since "scale" is an alias for "scaleX" and "scaleY" (both), it was calling your function once for scaleX and once for scaleY but since you were randomizing things inside those functions, you got different results (so scaleX was almost surely different than scaleY). I've applied a fix in the upcoming 1.19.1 release which you can preview (uncompressed) in TweenMax at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Better?

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