TweenMax will not initialize correctly: "Unavailable Unable to change the null target."

Question

In my application, I am trying to use the GSAP TweenMax / TimelineMax libraries to animate changes, but I encounter an early error in my code. Simplified (this is a React / Redux application using ES6):

import TimelineMax from 'gsap';
import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

someFunction() {
    var mailboxDropdown = ReactDOM.findDOMNode( this.refs.mailboxDropdown );
    // TweenLite.to(this, 0.1, { "y-offset": '-50px', 'opacity' : 0 });
    console.log(mailboxDropdown)
    var tl = new TimelineMax();
    console.log('here');
    tl.to(mailboxDropdown, 0.4, { "y-offset": '-50px' }, 'slideUp' )
    tl.to(mailboxDropdown, 1, { opacity: 0 }, 'slideUp-=.5');
};

The mistakes are strange. Firstly, if I do not initialize the TimelineMax with an object - something like new TimelineMax({repeat: 1})- (although the documents say that its default constructor is - null), it throws an error, even if you do not click console.log('here').

Uncaught Unable to change null target.

If I do initialize it using an object, as in the previous sentence, I find an error when I try to call tl.to. In particular:

Uncaught TypeError: tl.to

to . tl TweenMax:

TweenMax {vars: Object, _totalDuration: 0, _duration: 0, _delay: 0, _timeScale: 1...}

, add .

, ? , / , , , , , , (mailboxDropdown ..) .

Answer 1

( ), , . , , TimelineMax , . , :

import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

:

import TimelineMax from 'gsap';
import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

- /?

Answer 2

NPM .

import TimelineMax from 'gsap/TimelineMax'

Answer 3

:

Uncaught Cannot tween a null target.

:

import React, { Component } from 'react'; 
import TweenMax, {Power4} from 'gsap/src/uncompressed/TweenMax';
import EasePack from 'gsap/src/uncompressed/easing/EasePack';
import TimelineMax from 'gsap/src/uncompressed/TimelineMax';

Answer 4

TimelineMax 'gsap/TimelineMax';

Answer 5

According to the Greensock NPM docs, you can specify an individual export using the notation enclosed in square brackets:

import {TimelineMax, TweenMax} from 'gsap'