Adobe Animate React component

The component for embedding animations from Adobe Animate.

Installation

npm install -S react-adobe-animate

Examples

Simple implementation (codesandbox.io)

Dependencies

React
CreateJS – add this to your page <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
Your animation – add .js file exported from Adobe Animate to page with <script> tag

How to use

Example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Adobe Animate exmaple</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
    <script src="./lishtml5-with-background.js" type="text/javascript"></script>
    <script src="./lishtml5.js" type="text/javascript"></script>
  </body>
</html>

App.tsx

import { useState } from "react";
import AnimateCC, { GetAnimationObjectParameter } from "react-adobe-animate";

const App = () => {
  const [paused, setPaused] = useState(true);
  const [animationObject, getAnimationObject] = useState<GetAnimationObjectParameter|null>(null);
  const onClick = () => setPaused(!paused);

  console.log(animationObject);

  return (
    <div style={{ width: "400px" }}>
      <AnimateCC
        animationName="lishtml5"
        getAnimationObject={getAnimationObject}
        paused={paused}
      />

      <AnimateCC
        animationName="lishtml5"
        composition="C1475B64B160904BB90B34246A5FF54B"
        paused={paused}
      />

      <button onClick={onClick}>{paused ? "Unpause" : "Pause"}</button><br />
    </div>
  );
};

Next.js

To use the component with Next.js you have to include CreateJS and Animate files (you have to put those into public folder first) in Head component.

pages/index.tsx

import { useState } from "react";
import Head from 'next/head';
import AnimateCC, { GetAnimationObjectParameter } from "react-adobe-animate";

export default function Home() {
  const [paused, setPaused] = useState(true);
  const [animationObject, getAnimationObject] = useState<GetAnimationObjectParameter|null>(null);
  const onClick = () => setPaused(!paused);

  console.log(animationObject);

  return (
    <div style={{ width: "400px" }}>
      <Head>
        <script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
        <script src="/lishtml5.js" type="text/javascript"></script>
        <script src="/lishtml5-with-background.js" type="text/javascript"></script>
      </Head>

      <AnimateCC
        animationName="lishtml5"
        getAnimationObject={getAnimationObject}
        paused={paused}
      />

      <AnimateCC
        animationName="lishtml5"
        composition="C1475B64B160904BB90B34246A5FF54B"
        paused={paused}
      />

      <button onClick={onClick}>{paused ? "Unpause" : "Pause"}</button><br />
    </div>
  );
}

Props

Prop name	Type	Required	Description
animationName	string	true	Name of animation (`exportRoot = new lib.animationName();` in js file. There the name is `(lib.animationName = function`. Also usually name of published file)
composition	string	false	If you have two animations with same name you can specify an id of that animation. You can get it from .html file generate by Adobe Animate (`var comp=AdobeAn.getComposition("C1475B64B160904BB90B34246A5FF54B");`)
getAnimationObject	function	false	It is fired after component was mounted. It takes 1 argument – animation object that enables you to fire functions created in Adobe Animate
paused	boolean	false	Whether an animation should be paused

All other props will be passed to div surrounding canvas

FAQ

How do I insert animations published from the same file?

Unfortunately it isn't possible to export from Adobe Animate two unique animations. However you can make one! Simply replace all occurrences of composition id inside your .js file of an animation to one created by you. Composition id is this long string in var comp=AdobeAn.getComposition("C1475B64B160904BB90B34246A5FF54B"); found in .html file published by Adobe Animate.

🙋‍♂️ Questions

Should you have any questions on how to use/setup the component feel free to ask you questions on the discussions page.

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

For development purposes you can use the example folder.
You'll find instructions on how to use it in example/README.md

Show your support

Give a ⭐️ if this project helped you!

patrik-simunic-cz/react-adobe-animate