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.