css-functions icon indicating copy to clipboard operation
css-functions copied to clipboard

Add standard timing functions

Open kof opened this issue 9 years ago • 4 comments

For e.g. ease-in-out

Example with JSS:

import {easeInOut} from 'css-functions'

const styles = {
  container: {
    transition: {
      duration: 0.5,
      timingFunction: easeInOUt,
    }
  }
}

kof avatar Jan 03 '17 13:01 kof

@kof and where for example, should be placed frames function?

it can be in timing and you will use it as

import { timing } from 'css-functions'

const styles = {
   container: {    
      transition: {      
         timingFunction: timing.frames(10),  
      } 
  } 
}

or this function should be also available as

import { frames } from 'css-functions'

Shastel avatar Jul 25 '17 15:07 Shastel

Just thought about it, actually ease-in-out is not a function call, its the function name or a constant. Not sure if they are actually a good fit here.

A cubic-bezier(0.1, 0.7, 1.0, 0.1) timing function is on the other hand a function call.

kof avatar Jul 25 '17 22:07 kof

Also in css all those things are in a global name space, we don't even need to scope them, they can't conflict: import {easeInOut} from 'css-functions' would be actually just fine.

kof avatar Jul 25 '17 23:07 kof

It just doesn't make much sense to import them, because there is not much benefit vs. just using a string directly.

kof avatar Jul 25 '17 23:07 kof