codepunkt / css-spring Goto Github PK
View Code? Open in Web Editor NEWGenerate physics based css-keyframe animations for the css-in-js solution of your choice or plain css.
License: MIT License
Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css.
License: MIT License
Work in progress
I get the following error:
TypeError: Object.values is not a function
at path/node_modules/css-spring/dist/css-spring.js:648:100
Here's the code I'm trying to run:
const spring = require('css-spring').default;
const springTest = spring({ left: '50px' }, { left: '250px' }, { preset: 'gentle' });
RGB color interpolation could be done using https://github.com/miguelmota/interpolate-rgb - not too sure about rgba, hsl, hsla, named colors etc...
Really dig the idea here, but when I tried to get started and run on the examples, nothing was happening?
First of all, awesome little plugin! I've noticed that passing spring start and target values with () seems to break the code. At least thats my assumption.
Uncaught TypeError: Cannot convert undefined or null to object : css-spring.js:647
Lets say I want to translateX(50px), this won't work. I know I could use the "formatter" to fix this issue, but it would be awesome to just have start and target to be plain style objects.
This should allow multi-value springs such as translate
, translate3d
or border
-, margin
- and padding
-shorthands
import spring, { format } from 'css-spring'
const keyframes = spring(
{ translate3d: [ 0, 0, 0 ] },
{ translate3d: [ 250, -150, 0 ] },
{ preset: 'wobbly', precision: 5 }
)
const moveLeft = format(
keyframes,
(k, v) => `transform: ${k}(${v[0]} ${v[1]} ${v[2]});`
)
Subpixel rendering is not really a thing, so we can submit decimals for px values.
for style prefixing, inline-style-prefixer could be used. could also use cssnano (thanks @oliverturner for the idea) and autoprefixer postcss plugins - especially when performed at build time as opposed to runtime (needs babel/webpack plugins first)
My initial thought was to allow this in the default API. I could not find a way to integrate it into the API that pleased me, though. What i tried was something along these lines:
const keyframes = spring(
{ 'margin-left': 0, opacity: 0, background: '#f00' },
{ 'margin-left': '250px', opacity: 1, background: '#bada55' },
{ preset: { 'margin-left': 'stiff', opacity: 'gentle' }}
);
You should also be able to set damping
and stiffness
individually, so they would follow the same pattern. Combine that with default and fallback values for properties that don't have explicit options defined and you've got a lot of configuration juggling and parsing and an API that is not pleasant to use.
Imho, this usecase can be solved in user-land - should it ever arise. E.g.:
import { merge } from 'lodash'
const stiff = spring({ 'margin-left': 0 }, { 'margin-left': '250px' }, { preset: 'stiff' })
const gentle = spring({ opacity: 0 }, { opacity: 1 }, { preset: 'gentle' })
const wobbly = spring({ background: '#f00' }, { background: '#bada55' })
const keyframes = merge({}, stiff, gentle, wobbly)
Adding a commandline to generate keyframe css for users that don't use css-in-js might be a good idea once the api has stabilized.
Unitless value in either startProps
or endProps
should be interpreted as a value with a unit if the same property exists in the other argument with a given unit.
e.g. with
startProps { right: 0 }
endProps { right: '100px' }
the 0
in startProps
should be interpreted as 0px
.
When consecutive keyframes have the same value for a css property, the latter ones can be omitted.
For example, if the 90% to 95% keyframes all have left: 20px
and the 96% keyframe is the first one with a different left
value, the 91% to 94% keyframes can omit the left
declaration alltogether.
Change API so that it accepts both css strings and style objects
css units always come after the numbers, so it should be easy to parse them and store them to the according properties. when given something like this
const data = spring(
{ left: '50em' }, { left: '250em' }, { preset: 'gentle' }
))
we could then animate from 50 to 250, store the em
unit for the property left
and re-apply that unit to the resulting keyframes.
Properties that have the same values in subsequent keyframes can be eliminated. Keyframes that don't have any values left, can be eliminated aswell.
Tests should be executed on node 8.x in addition to the currently tested node versions.
This can be done by updating the .travis.yml accordingly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.