CODEWITHSUNDEEP
reactjsanimationsvgsnap.svg
WDP
WDP

Reputation: 295

Need a workaround for Adobe SnapSVG-animator running in React.js

SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.

What I did so far

  1. Published html file from a SnapSVG project(Animate.cc 2017)

  2. Copyed custom json file created from the SnapSVG project in animate.cc in my React app.

  3. Installed SnapSVG from npm install in my React App.

  4. Imported the js file copyed from the html publication created from animate.cc by importing the code. ( SnapSVG-animator isn't available in npm)

  5. The custom json file from animate.cc/snap svg project is loaded async and will be added to the SVGAnim(SnapSVGAnimator.min.js) function object which will create the svg animation in de browser.

The code

import axios from 'axios';
import snapsvg from 'snapsvg';
import { SVGAnim } from './SnapSVGAnimator.min.js';

let jsonfile = "circle.json", 
                responseType: 'json';

componentDidMount(){
    axios.get(jsonfile)
      .then(response => {
        const json = response.request.responseText;
        const animatedSVG = new SVGAnim(json);
      });
  }

Problem

The SnapSVGAnimator.min.js creates warnings and errors when it's imported in the JSX file. Looks like something going wrong with compiling these code.

✖ 1557 problems (110 errors, 1447 warnings)enter image description here

Upvotes: 1

Views: 602

Answers (1)

Gal Margalit
Gal Margalit

Reputation: 5844

First, install the following libraries:

npm install --save snapsvg-animator snapsvg-cjs

given your json is at ../../public/myAnimation.json do the following: 

import React, { useEffect } from 'react';
import SVGAnim from "snapsvg-animator";
import "snapsvg-cjs";
const myAnimation = require('../../public/myAnimation.json'); //import your json


function Home() {

  const svg = new SVGAnim(
    myAnimation,
    200, //width
    220, //height
    40 //fps
  );

  useEffect(() => {
    const container = document.getElementById('animation');
    container.appendChild(svg.s.node);
  });

  return (
    <div id="main">
      <div id="animation"/>
    </div>
  )



};
export default Home;

I am using react hooks because it is all the rage ☺ but it's working with "render" and "componentDidMount" all the same.

Upvotes: 1

Related Questions