Can I use DefaultStyles like in react-motion

[plus1tv]

Can I use DefaultStyles like in react-motion

[alaingalvan]

You should be able to set your component's state with the onComplete prop and from there set the visibility to hidden through styles or unmount the Anime component.

I'll work on 2 Codepens with these scenarios you're describing 😃:

1. An anime.js version of the pen you sent in your previous comment.
2. Using Anime.js callbacks to set the state of a component and hide them.

[maximusnikulin]

Oh thanks a lot.
I have tried react-motion, react-velocity, CSSTransitionGroup, native inline css for build queue of animations and only your library helped me.
I am sure that library is most simple and clear way to animate react-components.
I want to express my gratitude for this. I think It can be closed.

[maximusnikulin]

Thanks a lot for your answer. My main aim was to prevent animation on mount component, but when my props change do animation to normal direction and to reverse direction. I have created some pen to demonstrate what I am trying to achieve.
Thanks.

[alaingalvan]

So in React Motion, you're able to set defaultStyle that let you specify which styles play on mount:

import React from 'react';
import { Motion, spring } from 'react-motion';

const Hero = (props) =>
  <Motion 
    defaultStyle={{ opacity: 0 }} style={{ 
    opacity: spring(1, { stiffness: 20, damping: 4 }) }}>
      {
        ({ opacity }) =>
        <nav style={{opacity}}/>
      }
  </Motion>;

In React Anime, you would add a prop of type number[] with the name of the style you want to animate. The first index corresponds to the defaultStyle in React Motion.

import React from 'react';
import Anime from 'react-anime';

const Hero = (props) => (
  <Anime opacity={[0, 1]}>
    <nav/>
  </Anime>

To prevent executing the animation on mount, you could set the first index of that array to be the last index, or avoid having the opacity prop all together. Could I get some example code to make it a bit clearer for me what you're trying to do?

[maximusnikulin]

I also have a question about other css properties. For example visibility. It is really useful in job with popups. When overlay's opacity becomes 0, it needs to switch visibility to "hidden". I have read docs of Anime.js and haven't found any about it. I guess we have onComplete callback for this. Am I right? Is there any other way to do it?
Thanks