Group - Property

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

The current runtime uses GSAP for the animation playback, which means we can use GSAP specific properties as well. For example drawSVG or morphSVG.

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.

GSAP

The tween object in GSAP looks something like { attr: { cx: 100 } }, the Spirit runtime parses dot-separated property names into these nested objects.

This means that css.x is also valid and is exactly the same as x. (GSAP maps x automatically to css.x, see the CSS Plugin)

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""