Comments (8)
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.
Related Issues (20)
- Support for modules folder containing subdirectories HOT 1
- Resetting color on a TextLayer nested in a ScrollComponent breaks scroll interactions
- Option to code a rectangle with only two rounded corners HOT 1
- Shouldn't `mouseWheelEnabled` trigger elastic boundary effects as dragging events do?
- Shadows will not animate and ignore code state changes
- copying a layer from design mode does not copy the constraintValues of its children
- make test fails on "Layer Shadow Properties should animate shadows through a shadow property"
- undocumented event
- More comprehensive documentation for the open-source library in vanilla JavaScript
- Add support for Sass
- Framer X version of framer.js release? HOT 3
- 🔍 Improving search on docs with Algolia's DocSearch
- Table Drag and Drop Example?
- How to fix Gatsby.js build error 'window is not defined' ? HOT 1
- Scroll component is inaccessible
- Ability to render Frame as anything other than <div>
- Download link in readme is invalid
- Feature request: Add "detach all nested instances" to right-click menu
- Is framer generator dead?
- Code change in useTransform() documentation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from framer.