Animating CSS properties about framer HOT 8 CLOSED

Yup it's on the roadmap. The only thing we need to add is something that converts our numeric animator output to a css value (like rgba(x,x,x,x)).

from framer.

Will look into this as said feature would be invaluable for me. Only thing holding me back so far is the learning curve associated with reading/writing CS. @koenbok, any thoughts on this subject? I've noticed a disconnect where all docs and such seem to be vanilla while the source is CS.

from framer.

Yeah for new users we target vanilla but Framer itself is in CS.

from framer.

I'd love this feature.

from framer.

Wow there is a lot to consider to get this feature working. My first pass attempt has been to get [single] numeric property values animating (i.e. border-radius, border-width, etc.), but even there you have to consider unit conversion. I wonder if I should step back and reassess.

The goal here is to animate CSS properties. Presumably we want to be able to animate anything that can be animated via CSS transitions/animations. I wonder if "adding back in the css keyframe animation backend," per your plans todo list, would be the best way to solve this? Otherwise I think we will have to spend a lot of time working on converters and interpolators.

Also another possibility would be to look into this shim for the future web animations spec.

@koenbok what are your thoughts on all of this?

from framer.

Yes, it is basically writing a whole bunch of converters, some pretty complicated (for example to tween an rgb value).

I'm pretty sure there are a few frameworks out there that solved this. I'd look at their approach. I also remember that webkit has a lot of value converters built in that we could maybe repurpose.

I'll have to look into the animation spec, but I think they don't allow custom (spring) curves.

from framer.

Might be an appropriate use for a sort of bridge/dependency with velocity.js? Have you considered any sort of relationship between these projects, Koen?

Alternatively, there's a hacky way to drive physics-based animations using Web Animations mentioned here: http://lists.w3.org/Archives/Public/public-fx/2014AprJun/0073.html

One approach is to set up and pause animations that drive position and rotation, then update progress through those animations by setting the player's currentTime.

from framer.

Most things are animatable through Framer now.

from framer.