codepunkt / css-spring Goto Github PK

Work in progress

• toPrecision
• getInterpolator
• parseDeclarations
• getAnimationValues
• sanitizeValues
• addInterpolatedValues
• buildKeyframeObject
• main API

Change API so that it accepts both css strings and style objects

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]});`
)

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' });

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)

RGB color interpolation could be done using https://github.com/miguelmota/interpolate-rgb - not too sure about rgba, hsl, hsla, named colors etc...

Subpixel rendering is not really a thing, so we can submit decimals for px values.

Properties that have the same values in subsequent keyframes can be eliminated. Keyframes that don't have any values left, can be eliminated aswell.

Really dig the idea here, but when I tried to get started and run on the examples, nothing was happening?

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.

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)

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.

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.

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.