samuelms

Hey Jack, That's really helpful. When does skewing (skewX/skewY) take place? My understanding is that if I restructure my CSS transform strings to use the GSAP order (translate X/Y/Z -> rotation X/Y/Z -> scale (and skew?)), then I should receive identical results between the two. Let me know if I'm misinterpreting something. I guess ultimately it doesn't matter too much -- all I'll really need is the GSAP animation properties to be right. Still, it would be nice to be able to quickly reference the CSS for the final transform state (even if it's overridden by the 3D matrix). Thanks.

Hey Jack, Thanks for the response. That makes a lot of sense. What order does GSAP run through the transform properties? Knowing that would help, since I'd be able to fiddle with an equivalent CSS transform string in a sandbox instead of having to run through the animation for debugging.

Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.