Jump to content
Search Community

List of tweenable properties that are none css standard?

lt852 test
Moderator Tag

Recommended Posts

Hello, 

Just wondering if there's a list somewhere in the documentation or elsewhere showing all the none regular css properties that can be tweened. Properties such as xPercent, rotationX, rotationY etc. 

Thanks!

 

Link to comment
Share on other sites

Hey @lt852,

 

DOM, SVG, <canvas>, and beyond

GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following:

CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value.

SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects.

Any numeric value For example, an object that gets rendered to an <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js.

 

More info in the DOCs e.g. on the page of GSAP CSSPlugin.

 

Happy tweening ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

I think it would be super helpful for developers if there was a more comprehensive list somewhere. I am discovering some from the docs and some from the forums. In the last hour I have discovered "transformPerspective" "transformOrigin" properties after rummaging through various forum threads. 

Link to comment
Share on other sites

I think you may be misunderstanding - there is no pre-defined list of properties that GSAP can handle or recognize. It’s super flexible. You can literally do this: 
 

let myObject = {someProp: 100};

gsap.to(myObject, {
  someProp: 500,
  onUpdate: () => console.log(myObject.someProp)
});

 

You mentioned transformOrigin - that’s just a standard CSS property “transform-origin” but you simply camelCase those in JavaScript because JavaScript can’t accommodate dashes like that (it’d be interpreted as a minus sign). 

 

Since CSS properties aren’t set directly on the element (they actually go in the element.style object), GSAP has a CSSPlugin that handles all of that automatically for you. 

 

There are a few special properties that we’ve added for convenience, mostly for CSS transforms because those are so complicated. GSAP solves all kinds of problems with CSS transforms. There’s a list on the CSSPlugin page of the docs. For example:

  • ”x” - short for transform: translateX(…)
  • ”y” - short for transform: translateY(…)
  • ”rotation” - short for transform: rotate(…deg)
  • ”scaleX” - short for transform: scaleX(…)
  • ”scaleY” - short for transform: scaleY(…)
  • ”scale” - short for transform: scale(….)
  • …etc. (there are more in the docs)

Does that clear things up? 

 

  • Like 4
Link to comment
Share on other sites

This gist tried to extract relative things from the documentation into a more concise list, it may help you some? https://gist.github.com/lunelson/7d83ca0c8bdfab170dd3. As stated "Standard CSS properties are all supported, with hyphenated-names becoming camelCaseNames." so the following list might help you some. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

I think GreenSock would need a ScrollTrigger enabled infinite scrolling page to even remotely try to list what all GSAP can animate😂

 

  • Like 3
  • Haha 3
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...