The missing part

[kof]

This sounds wonderful, just one prob - IE. And yet we can make it work there by simply applying observables to the CSS rules (not inline). I was thinking about a good way to do so in jss, maybe you have some ideas?

[nealoke]

Also believe that IE needs to be supported, not sure how though. Like you said IE sucks ;)

[kof]

Well using simpler technics instead of variables - classes, we still actually manipulate a regular css rule. This rule can be applied to any elements using a class.

[nealoke]

True although I'm not as experienced in this area though ;) i'm sure you can maybe suggest a solution / PR?

[kof]

This library needs to be able to accept any style rule as a target for manipulation of a style property, as well as the property name. By default it manipulates html.style[' --mouse-x'] for e.g., but would need to manipulate some cssRule.style.top. This should be too hard.

A harder part is to make it usable to the end user. It needs a way to access css rules. I have only one idea so far as a maintainer of JSS. They both can work together. In JSS we got refs to the css rules if link: true option is defined. Then its a matter of how to organize the code. Should such animations be part of the CSS/JSS? Should it be separate and can be used by JSS?
We need to think in examples and see where it can go.

[kof]

Also we got an API in JSS for setting a style property, which can be used at the end:

const sheet = jss.createStyleSheet({
  button: {
    position: 'absolute',
    top: 0
  }
})

// Sets the top property of the button rule to some value.
sheet.getRule('button').prop('top', '100px')

[kof]

What we need then is to connect an Observable with the sheet.getRule('button').prop('top', '100px') to make it reactive this way.

[nealoke]

Can this also modify css style sheets in stead of creating a style sheet?

[kof]

Can this also modify css style sheets in stead of creating a style sheet?

Like modifying an existing style sheet? No, it wouldn't make any sense for JSS I think, this is also not very hard, it would be max 10 lines of code to write a function that walks over style sheets in the dom and collects the css rules. The problem is how to connect the observables with the corresponding CSS Rules in terms of code organization.

[kof]

As the whole point of this idea is to connect user actions and animations in an efficient way, its always the question where should be the animation defined. You will always need to receive events from the DOM and then pipe them to the style sheets. Its kinda in the middle between rendering logic and layout.