Search the Community
Showing results for tags 'css transforms'.
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. You may be surprised by how much work GSAP does under the hood to make animating transforms intuitive and performant. This video explains the top 10 reasons you should be using GSAP to animate transform-related values like scale, rotation, x, y, etc. Watch the video Independent control of each component (x, y, scaleX, scaleY, rotation, etc.) Physics-based animations and dragging, plus advanced easing like Elastic and Bounce Snap to any increment or set of values Query values anytime with _gsTransform Relative values ("+=" and "-=") Directional rotation (clockwise, counter-clockwise, or shortest) Two different skew types ("compensated" and "simple") Consistency across browsers, especially with SVG Animate along a path Sequencing and on-the-fly controls All of these features are baked into CSSPlugin (which is included inside TweenMax). See the docs for more information. Happy tweening!
-
- videos
- css transforms
-
(and 5 more)
Tagged with:
-
Hi there, I'm converting a CSS animation to GSAP, and I'm getting some weird positioning after conversion. Can anyone tell me what am I missing here? Any help would be appreciated.
- 11 replies
-
- gsap
- css to gsap
-
(and 2 more)
Tagged with:
-
Hello, I am experiencing an edge-case error in the Android stock browser: I am using greensock to animate a "shopping cart" drawer from the top of the screen. The shopping cart items scroll horizontally within that drawer when it is extended. In order to move it, I am animating the CSS "top" property. i.e. css: {top:"+=255px", "z:0.01"} I added the z:0.01 to make it smooth on Android Chrome and iOS, but in the stock browser, it is better without that property. Also, when the shopping cart items are wider than the screen width (there is an overflow:hidden on the cart div), the shopping cart animation to open/close doesn't work at all in the stock browser unless that " z:1" is removed. Any ideas on how I can either detect the stock browser and avoid that property, or if there is a way to force it to work?