List of tweenable properties that are none css standard?

[lt852]

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!

 

[mikel]

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

 

[lt852]

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. 

[GreenSock]

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? 

 

[lt852]

Super helpful thanks guys @GreenSock @mikel

[Shrug ¯\_(ツ)_/¯]

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. ?