search

codepunkt / css-spring

Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css.
MIT License
313 stars 15 forks source link

Combine different stiffness/damping for properties in the same animation #5

Closed codepunkt closed 7 years ago

codepunkt commented 7 years ago

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)