Jump to content
Search Community

List Animating Oddity

Anthrask 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



I've been experimenting with some of the more "advanced" features of GSAP a bit, although I already have a fair amount of experience with the essentials.


The motivation for this post is that I've run face-first into something I find utterly perplexing. Basically, the order of the items found in a list passed to the function seem to matter, e.g. [ thing1, thing2, thing3 ] vs. [ thing3, thing1, thing2 ] in TweenMax. I've found a case in which the latter works fine but the former is broken with respect to thing3. The provided codepen should tell the rest of the tale. Click on the circle to animate with the former order; click on the triangle to animate with the latter.


I assume it must be a bug; it's hard for me to imagine that it isn't. But if it isn't, then I'd like a bit of explanation for the rationale behind this decision. Thanks.

See the Pen BqJPaX by Mawkintash (@Mawkintash) on CodePen

Link to comment
Share on other sites

I got the same result using vanilla JS, but I don't know if it is a bug. @GreenSock  will have to verify that one.


See the Pen QZazEO by osublake (@osublake) on CodePen



I wouldn't expect it to work because you're trying to animate objects with different types in the same tween. Elements will use the CSSPlugin to set x, while a regular JavaScript object doesn't need any plugins. I've accidentally done that a few times in the past, and I've learned that it's best not to mix different object types. 




  • Like 6
Link to comment
Share on other sites

Yeah, I can totally see why you'd think this is a bug and I suppose it sort of is, but one could argue that it's a bug when it DOES work ;)


As @OSUblake said, you're doing something very unusual here in that you're animating completely different types of objects, but remember that technically in order to animate CSS properties you've got to define them in a "css:{}" object so that CSSPlugin takes control of those. However, there's an "autoCSS" feature that senses when the target is a DOM element and then it automatically creates and wraps those "css:{}" values for you (to minimize typing...it's a convenience, as it's so incredibly popular to animate CSS on DOM elements). 


In your demo, if you had the plain object AFTER a DOM element, what was happening is that GSAP noticed the DOM element and pushed the "x" value into a "css:{}" object as a convenience, so your vars looked like this: 




Thus by the time it go to the standard object it was trying to animate CSS properties of a plain object (doesn't make sense). Of course a solution for us would be to never edit the original vars object (create a copy for each and every target), but GSAP is HYPER optimized for speed an minimal memory consumption, so that was a design decision we made. 


A solution would be to keep your arrays homogenous (don't mix plain objects with selector text or DOM elements), or you could technically define BOTH values x: and css:{x:} like this:


TweenMax.fromTo([ this.$refs.circle, this.$refs.triangle, this.$data ], 1, { x: 0, css:{x:0} }, { x: 200, css:{x:200} });


But that seems a bit odd to me readability-wise. My personal preference would be to use a different tween for the generic object. 


Does that help? 

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