Jump to content
GreenSock

subh

TweenMax with componentDidMount in React

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×