Is possible to set custom global property for transition duration ?

[PatrickSCLin]

I'm learning GSS 2.0 currently, it's awesome and powerful,

but I'm wondering to know, is possible to set a custom property for transition duration ?

ex:

box[width] == #box[height] == 200;

box[center] == ::window[center];

box {

border: 1px red solid;

}

box.animated {

transition: margin, 0.3s;

}

I would like to set a custom global property which able to instead "0.3s",

it will be helpful, if I want to set a group of transitions

[Inviz]

Thanks Patrick! Glad that you like it.

We're adding some spring-based animation support, so there will be other way of defining transitions besides transitions property. It's not advised to have global transitions, because gss doesnt listen to transition keyframes and may not re-layout your elements properly (e.g. nested elements may not respect changing parent element margins).

The other thing is it's better to define the css things within css stylesheet, unless you're using conditions for better performance. * { } selector is supported in gss but it creates a huge mess of DOM observers.

So yeah, keep in touch, better animation solution is coming. But currently, you better assign transitions of top/left to outermost wrapping elements.

[dlee]

@Inviz do you have a timeline for when the animation support would be coming? Any sneak peaks on what it would look like?

[Inviz]

I think we'll have working spring animation within 2 following weeks. Springs are a kind of transitions where durationis computed automatically based on friction, tension and velocity parameters.

Basically, it'll be a wrapper around rebound.js, with tension & friction of different properties (or transformations) configurable in css.

The ultimate goal is to allow layouts morph, but it'll probably not be so easy out of the box in the first iteration.

This first solution will probably not have any kind of delay or chaining support. Those will be added when we'll have timeline api based on range primitive.

[dlee]

@Inviz cool, looking forward to it!

BTW, have you considered using velocity.js (http://www.julian.com/research/velocity/) as the animation backend? I haven't used it yet, but just wanted to throw it out there for you to check out.