https://github.com/hoppula/react-snabbt

React wrapper for snabbt.js
https://github.com/hoppula/react-snabbt

animation react snabbt

Last synced: 2 months ago
JSON representation

React wrapper for snabbt.js

• Host: GitHub
• URL: https://github.com/hoppula/react-snabbt
• Owner: hoppula
• Created: 2015-05-27T11:50:09.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-10T13:40:54.000Z (about 9 years ago)
• Last Synced: 2024-05-16T01:03:52.880Z (8 months ago)
• Topics: animation, react, snabbt
• Language: JavaScript
• Size: 148 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-snabbt

React wrapper for excellent [snabbt.js](http://daniel-lundin.github.io/snabbt.js/) animation library.

### require('react-snabbt')

When you require `react-snabbt` directly, all styles go through React state handling, so the performance will take a small hit. It's not far off from direct DOM `.style` manipulation though and it's fine for single element animations. Use this if you want React to have total control over the DOM.

### require('react-snabbt/dom')

When animating large amount of elements, it's recommended to require `react-snabbt/dom` instead. This component bypasses React state handling and applies CSS transforms directly to DOM elements. When using this component, remember to not use `opacity` or `transform` in your React inline styles as they're handled by snabbt.js.

## <Snabbt>

You can animate one or multiple child components with `Snabbt` component. Use `options` prop for setting the animation options. If you pass an array of animation options to `options` prop, `react-snabbt` will chain the animations.

You can start the animation by passing a truthy value in `animate` prop.

You can stop the animation by passing a truthy value in `stop` prop. There's currently no way to continue stopped animation.

If you want to be notified when animation finishes, pass a callback function as `onComplete` prop, it will be called only once even when animating multiple elements.

There's also support for attention animations, just add `attention` prop with truthy value.

### Example usage

```javascript

import Snabbt from 'react-snabbt';

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      animate: false

    };

    this.animate = this.animate.bind(this);

  }

  animate() {

    this.setState({animate: true});

  }

  onComplete() {

    console.log( "Animation completed!" );

  }

  render() {

    const buttonStyles = {

      width: "200px",

      height: "40px",

      background: "#ddd",

      borderRadius: "5px"

    };

    const options = {

      position: [100, 0, 0],

      rotation: [Math.PI, 0, 0],

      easing: 'ease'

    };

    return (

      


        

          Button

        

      

    );

  }

}


export default App;

```

## <Toggle>

With `react-snabbt/toggle` component you can animate back and forth between initial state and `options`. You can initialize the animation to `options` prop state by passing `animate` prop with truthy value. You should set the `animate` prop to falsey value once the animation finishes. You can then initiate the animation back to initial state by setting `animate` to a truthy value again.

### Condensed example

```javascript

  

    

      Button

    

  

```

## License

MIT