Where to store function return in React component?

Question

I am trying to use anime.js within a react component. The animations don´t work properly(incomplete rotation, freezes, seems to skip frames...) and are affected by resizing of the window as well,the more i resize the shorter the animation gets until it freezes.

This is my react component:

import React from "react";
import { SplitButton, MenuItem } from "react-bootstrap";
import * as animationOptions from "../../animations";

export default class ImageComponent extends React.Component {
    render() {

        let tttt = animationOptions.textAnim1();
        let iiii = animationOptions.imageAnim1();
        console.log(tttt);


        return (
            <div>

                <div id="canvas">
                    <p id="text" className="tttt">some text</p>
                    <image id="image" className="iiii" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
                </div>
            </div>
        );
    }
}

My imported animations:

import anime from "animejs";

export function textAnim1(){ return anime({
    targets: '#text',
    rotate: 360,
    duration: 2000,
    loop: true,
    autoplay:true,
  });
 }; 

export function imageAnim1(){ return anime({
    targets: '#image',
    translateX: 250,
    duration: 4300,
    loop: true,
    autoplay:true,
  });
};

Not sure if the issue is with how I export the function animations or how I define the variables holding the function return....There are no errors but here is the log for let tttt:

Here is the basic example on anime.js: https://github.com/juliangarnier/anime/

Notice that I need tttt available with in component to trigger methods like tttt.play() or .pause() that are within the function return let tttt = animationOptions.textAnim1();

Strange enough regardless of defining class="tttt" / className="tttt" / class={tttt} or className ={tttt}, the outcome is always the same!!! (in short i was testing...) — Al Ex Tsm, Mar 15 '18 at 13:40

score 0 · Accepted Answer · answered Mar 15 '18 at 16:47

This will work:

componentDidMount(){
  animationOptions.textAnim1();
  animationOptions.imageAnim1();
}

render(){
  return (
    <div>
      <div id="canvas">
        <p id="text" >some text</p>
        <img id="image" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
      </div>
    </div>
    );
  }
}

Check the running code on CodeSandbox.

Where to store function return in React component?

1 Answers1