TweenMax won't initialize correctly: "Uncaught Cannot tween a null target."

Question

In my app, I'm trying to use the TweenMax/TimelineMax libraries of GSAP to animate changes, but I'm running into a early error in my code. Simplified (this is a React/Redux app 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 errors are weird. Firstly, if I don't initialize TimelineMax with an object -- something like new TimelineMax({repeat: 1}) -- (although the docs say its default constructor arg is null), it throws an error before even hitting the console.log('here').

Uncaught Cannot tween a null target.

If I do initialize it with an object as in the previous sentence, I hit an error when I try to call tl.to. Specifically:

Uncaught TypeError: tl.to is not a function

Even though to is definitely in the docs. The tl object appears to be a TweenMax object:

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

But it isn't responding to most methods, including add and a bunch of others.

Any idea what's going on here? It's super confusing to me, cause all the docs/tutorials seem to suggest that what I'm doing is fine, and all the relevant objects (mailboxDropdown, etc) seem correctly defined.

Karwan

Answer 1

Before posting this question (and after much searching around and blind experimentation), I discovered that the issue actually has to do with importing. I'm not sure why, but removing the TimelineMax import fixed things, so that everything in the original code worked just fine. That is, my imports should have been this:

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

Not this:

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

Some sort of namespace clash/overwrite?

Karwan

Answer 2

import TimelineMax from 'gsap/TimelineMax'; That's works

Pirandello

Answer 3

As per the Greensock NPM docs, you can specify individual exports using the bracketed notation:

import {TimelineMax, TweenMax} from 'gsap'

Selector

Answer 4

NPM module is not submitted properly yet. Use

import TimelineMax from 'gsap/TimelineMax'

German

Answer 5

I resolved the error:

Uncaught Cannot tween a null target.

By importing this way:

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';

Snell