Event Listeners

[Neobii]

Hi, I'm trying to use some animate stuff inside react as well.

I'm wondering if you have an easier way to handle which animations are playing and having callbacks on certain frames bubble up to the react components.

I am also using zimjs

[bibixx]

@Neobii I would assume that it could help.
When you render the animation using this component you can have access to the exact internal object that Animate uses. And using that you can listen on different events that it emits (I'm not really sure as I don't use Animate daily but this docs could be helpful https://www.createjs.com/docs/easeljs/modules/EaselJS.html)

import AnimateCC from "react-adobe-animate";

const App = () => {
  const setAnimationObject = (obj) => {
    obj.addEventListener('yourEvent', console.log)
  }

  return (
    <AnimateCC
      animationName="yourAnimationName"
      getAnimationObject={setAnimationObject}
    />
  );
};

[bibixx]

However I can see that you are using next.js. I am not sure but it could be tricky to setup it with next.js because of the SSR

[Neobii]

Okay, good to know, I'll try it out here in a lil bit. My biggest use case is so far is managing state in react and animation without doing rerenders and avoiding race conditions or making sure all animations are complete. For this kind of work, do you think using events is okay or do you think using the new async/await is better than using event listeners?

Eventually, if they ever add kinematics to animate or createjs, this will open animate up to doing more declarative based animations. It doesn't seem lottie files can use kinematics to predict transfer between states, like say something unity can do, so maybe they animate will have this eventually. For example, if an animation is playing and someone clicks a button, the current state of the animation will use kinematics to transition to the new state instead of manually making all the edge case animations, ie stopped to running, idle to running, collision to running etc.

I'll see how far I can get!

[Neobii]

Okay, I see that you are using componentWillMount. The thing that helps me get by with SSR is the useEffect react hook... this fixes the window is undefined issue when building the pages.

[bibixx]

@Neobii the componentDidMount wasn't really an issue, but the fact that I was referencing window object. I have pushed a change that should add SSR support (#44, I have also added an example how to use it with Next.js).

As to the async/await vs listeners to be honest I'm not really sure as to what do you mean. I couldn't figure out how does your code work as I am not familiar at all with zimjs and as so I don't really see where you'd like to change it. If you could provide me with an example code using react-adobe-animate, then I could probably help you a bit (codesandbox example would be the best)