https://github.com/threepointone/react-ease

animations for react
https://github.com/threepointone/react-ease

Last synced: about 1 month ago
JSON representation

animations for react

• Host: GitHub
• URL: https://github.com/threepointone/react-ease
• Owner: threepointone
• Created: 2015-06-13T12:53:41.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-08T07:50:13.000Z (over 6 years ago)
• Last Synced: 2024-05-02T05:41:28.470Z (2 months ago)
• Language: JavaScript
• Size: 188 KB
• Stars: 53
• Watchers: 5
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-function-as-child-components - react-ease

README

        
(work in progress, looking for feedback)

react-ease

---

back to first principles

`npm install react-ease react --save`

canned animations for [react](https://facebook.github.io/react/)/[react-native](https://facebook.github.io/react-native/)

(if you're looking for something more dynamic, consider [react-springs](https://github.com/threepointone/react-springs))

```js

// output floats from 0 to 100 over 0.5 seconds

  {val => 
{val}
}     // yes, children is a function


// you can tell when it's done

  {(val, done) => 
animation {done ? 'over!' : 'running...'}
}


// you can ease multiple values at once

  {val => 
move it, move it
}


// or if you want more control over each value

{x =>

  {y =>

    
not bad!
}

  }


// finally, you can chain a bunch of them together

 done && console.log('done!')}

  repeat={5}>

    {(val, done) => 
sweet!
}


```

Ease::props

---

- from: *number*/*object*

- to: *number*/*object*

- duration: *number* (ms)

- ease: *string*/*function* `./src.js` has a list of available easing functions, or pass in your own

- delay: *number* (ms)

- onProgress: *function* - optional callback called on every 'movement'. 'returns' the current value, and a `done` flag

- repeat: *number*

Chain::props

---

- sequence: *array*

- repeat: *number*

thanks

---

- [ease-sential](https://github.com/WebReflection/ease-sential), of which react-ease contains a tweaked port