TweenMax with componentDidMount in React

[subh]

I just found out about gsap (so cool stuff). So I wanted to try out how gsap works in react and wanted to convert https://codepen.io/davide77/pen/KeBvPY to a react component.
And I am lost in the first line
so this is what I was trying
 

import React, { PureComponent } from 'react';
import { TweenMax, Power2, TimelineLite, TweenLite } from "gsap";
class AnimatedSlides extends PureComponent {
  constructor(props) {
    super(props);
    this.__element = null;
    // reference to the animation
    this.myTween = null;
  }

  componentDidMount() {
    this.myTween = TweenMax.set(this.__element, { alpha: 1 }, 0);
  }

  render() {
    return (
      <div className="container">
        <div id="content-wrapper">
          <div
            id="foreground"
            ref={element => {
              this.__element = element;
              return element;
            }}
          >
          </div>

 

and it started throwing me error of Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

What am I missing?

[Rodrigo]

Hi and welcome to the GreenSock forums!!

 

For what I can see there are two things that are getting my attention.

 

The first one is the return statement in the ref method in your JSX. That's not needed, all you have to do is update the instance reference wih the DOM node.

 

The second thing that gets my attention is the error you're reporting since, at least in the snippet you posted, I don't see offsetWidth anywhere.

 

If you  could create a reduced case sample in either codepen or stackblitz, it'd help to pinpoint the issue faster, because the error you're reporting doesn't add up to the code you're posting.

 

Finally a few weeks ago a getting started with GSAP and React article was released here in the GreenSock blog, take a look at it and to the samples in order to get a better grasp of how you can create GSAP animations in a React app.