@viewstools/animations

1.0.8-alpha.1 • Public • Published

@viewstools/animations

Animations wrapper around react-spring with an API closer to what Views would use internally.

For React DOM we only expose a Spring component as in Views we do timing animations through CSS. Use it like:

import { Spring } from '@viewstools/animations/dom'

<Spring bounciness={10} speed={20} delay={0} to={{paddingTop: props.isActive? 10 : 0 }}>
  {
    styles => (
      //... do something with the styles object  it will have the updated
      // paddingTop value
    )
  }
</Spring>

For React Native we expose a Spring and Timing instead. Spring is the same interface that DOM has -just import it from @viewstools/animations/native. Use Timing like:

import { Timing } from '@viewstools/animations/native'

<Timing duration={200} delay={0} to={{paddingTop: props.isActive? 10 : 0 }}>
  {
    styles => (
      //... do something with the styles object  it will have the updated
      // paddingTop value
    )
  }
</Timing>

License MIT. (c) 2018 UXtemple Ltd.

/@viewstools/animations/

    Package Sidebar

    Install

    npm i @viewstools/animations

    Weekly Downloads

    0

    Version

    1.0.8-alpha.1

    License

    MIT

    Unpacked Size

    22.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • dariocravero
    • neil-buckley
    • alex-vladut