Jump to content
Search Community

GSAP VS MooTools

OxXxigen test
Moderator Tag

Go to solution Solved by GreenSock,

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

sorry for bad english.
If use mootools and try to change "position" attribute, autoCss function GSAP  detect "position" in target and don't add it to vars.css, becouse mootool add "position" method to Node prototype.

i fix it in my local machine, but...

where can i write, to fix it in future?

Link to comment
Share on other sites

Hello OxXxigen, and Welcome to the GreenSock Forum!

 

Anytime your using GSAP, its best to use GSAP set() method instead of MooTools autoCSS or even jQuery css() method. This way you allow GSAP to set your CSS properties you will be animating. If you use the MooTools or jQuery css methods you will be changing CSS properties on DOM elements outside of GSAP.

 

In GSAP use the set() method. Link to the GSAP set() method in the Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

Example of GSAP set() usage:

 

Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name. So the following lines produce identical results:

TweenMax.set(myObject, {x:100, y:50, opacity:0});
TweenMax.to(myObject, 0, {x:100, y:50, opacity:0});
And of course you can use an array to set the properties of multiple targets at the same time, like:
TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});

You can also use selector text to target DOM elements that match that criteria.

 

So basically when using GSAP.. use the set() method, so this way you allow GSAP to keep track of your CSS properties on the elements your animating. Otherwise if you use MooTools or jQuery CSS methods you are changing CSS properties outside of GSAP.

 

:)

  • Like 4
Link to comment
Share on other sites

thanks for answer.. 

but problem doesn't in that.....code for example
part of TweenMax.min.js

z = function(t, e) {
    var i, s = {};
    for (i in t) B[i] || i in e && "transform" !== i && "x" !== i && "y" !== i && "width" !== i && "height" !== i && "className" !== i && "border" !== i && "position" !== i || !(!E[i] || E[i] && E[i]._autoCSS) || (s[i] = t[i], delete t[i]);
    t.css = s
}

as i understood this is function that convert params obj assigned to function, into Obj.css

and when this function check "position" key, look at the "|| i in e &&" part of code..

in this part original lib diside that "position" need to be called becouse of mootools add method position to DOM elements.

i fix it added "&& "position" !== i" part of code to originl lib.

 

sorry for bad english.

Link to comment
Share on other sites

  • Solution

You could simply define your CSS values inside a css:{} object so that it's very clear which ones are CSS-related and which are not. Or set autoCSS:false. I don't think it would be appropriate to add that "position" code to the core. Frankly, this seems like an odd behavior in MooTools. 

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