Group - Property

You can animate any CSS/GSAP property. Here's a list of animatable CSS properties.

The Web Player uses GSAP as the default animation tween/playback strategy, which means we can use GSAP specific properties as well. For example drawSVG or morphSVG (if you're using these plugins, only for Greensock Club members).

Nested properties

Some properties are readonly by default and cannot be changed at runtime. Consider a SVG <circle/> element for example. Animating cx directly would throw an exception:

  
    Cannot assign to read only property 'cx' of object '[object SVGCircleElement]'
  

Luckily, with GSAP, you can animate the cx using the AttrPlugin.

In Spirit you can use attr.cx as a property name.

Greensock Animation platform

Tweening the cx of a SVG Circle in GSAP looks something like:

TweenMax.to(circle, 1, { attr: { cx: 100 } })

The Spirit Web Player parses dot-separated property names into these nested objects, meaning that css.x is also valid and is exactly the same as x because GSAP maps x automatically to css.x. See the CSS Plugin.

results matching ""

    No results matching ""