React Integration

[juliangarnier]

React Integration

[muratgozel]

This may be helpful. It is a demonstration of button hover effect.

import anime from 'animejs'
...
const JoinWaitlistButton = ({ href, title }) => {
  return(
    <div>
      <a
        href={ href }
        onMouseOver={e => {
          anime({
            targets: e.currentTarget,
            backgroundPositionX: '10px',
            scale: {
              value: 1.05,
              delay: 300,
              duration: 500
            }
          })
        }}
        onMouseOut={e => {
          anime({
            targets: e.currentTarget,
            backgroundPositionX: '0px',
            scale: {
              value: 1,
              delay: 300,
              duration: 500
            }
          })
        }}>
        { title }
      </a>
    </div>
  )
}

[fcor]

Another example of anime.js in react without any other libraries, just lifecycles:

import React, { Component } from 'react'
import anime from 'animejs'

class Animated extends Component {
  componentDidMount(){
    anime({
        targets: '.anim',
        translateX: [
            { value: 100, duration: 1200 },
            { value: 0, duration: 800 }
        ],
        rotate: '1turn',
        backgroundColor: '#FFF',
        duration: 2000,
        loop: true
    });
  }
  render() {
    return(
      <div class="anim">
       Here goes the element you want to animate!
      </div>
    )
  }
}

export default Animated

[rohan-deshpande]

You can easily integrate it with React by using refs and something like ReactDOM.findDOMNode(this.refs.animeTarget). Anime's targets prop takes DOM elements and that's exactly what you pass it if you get the target via findDOMNode.

If you want to animate multiple things you might want to namespace your refs and then store them in arrays to pass to your anime constructor.

[kennetpostigo]

Couldn't you also make anime a component? And just wrap the components you want to animate?

[juliangarnier]

I'm not familiar with React and the virtual dom, but like @rohan-deshpande said, as long as you're using a valid DOM element as a target, it should work.

[adrianmcli]

Given that React is becoming such a dominant player in frontend web development, I suggest that @muratgozel's example be put on the README somewhere.

[kennetpostigo]

@adrianmcli @muratgozel check out react-anime

[adrianmcli]

@kennetpostigo awesome! thanks for the link. Maybe there should be a link to it on the README then.

[jduhls]

An example of updating a javascript object in state inside a class component instead of directly altering the DOM element ref:

const style = this.state.style

animejs({
  targets: style,
  scale: 1.005,
  boxShadow: 8,
  update: a => this.setState({ style })
})