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)

[Neobii]

Okay, cool, I'll try that out! Thanks for the quick reply!

[Neobii]

Ah, I see you've added these

if (typeof window === 'undefined') {
    return;
  }

Works good!

In nextjs, in the export file, I had to change my links to be relative to the public directory.

{src:"images/Scoup_atlas_1.png"
becomes {src:"/TheScoup/images/Scoup_atlas_1.png"

Also one other note... finding the lib.animationName in the js file was strange, maybe you could say that it's usually below the // stage content: in the js file for easier checking?

Great stuff!

[Neobii]

I seem to get this error when I change around the head in nextjs: Error was not caught AnimateCC: AdobeAn dependency not found.

layout which loads the createjs stuff
data loading component
the thing that has the animate component in it

I am using zimjs's version of createjs btw, it has seemed to work out so far.

[Neobii]

As far as next implementation... they would probably do something like this:

import dynamic from 'next/dynamic'

const Actor = dynamic(
  () => import('../components/Actor'),
  { ssr: false }
)

link

Instead of the content window trick, but maybe other people might want to try out this with ssr?

Also with nextjs, there seems to be a race condition on when next/head is used or AdobeAn gets overwritten somewhere. For now, I just included my animate.js file in my layout instead of the individual components that use the animations.

[bibixx]

@Neobii I'll try to look into this issue at the end of the week as I have had lots of work recently. However I am afraid that including it in the layout may be the only solution as far as the raw output from Animate goes. It's not really suited for this kind of job

[Neobii]

Alright, thank you! Before I was just using iframes for good encapsulation of this stuff.

[Neobii]

I came across this article

instead of using if (typeof window === "undefined") return null; they use:

import { useState, useEffect } from "react";

const useIsSsr = () => {
  // we always start off in "SSR mode", to ensure our initial browser render
  // matches the SSR render
  const [isSsr, setIsSsr] = useState(true);

  useEffect(() => {
    // `useEffect` never runs on the server, so we must be on the client if
    // we hit this block
    setIsSsr(false);
  }, []);

  return isSsr;
}

Sorry, I'm still getting the feel of how github discussions work.

[Neobii]

Looks like nextjs now has a Script tag with a beforeInteractive option.
script documentation
still settling down though

I tried it out on some scripts so far, but some hit and miss with some of those creative frameworks with seeing just works improvements... Hopefully, I can find a better loading pattern for the animate container.