Uncaught TypeError: gsap_TweenMax__WEBPACK_IMPORTED_MODULE_4__.TimelineLite.to is not a function

[Minjong]

(Hello this is my first forum post ever, please let me know if I can improve my post in any way  )

I've been loving using GSAP and recently started learning React and started utilizing GSAP with it.

So, when I use TweenMax, it works totally fine but when I try to use TimelineLite/TimelineMax, it gives me an error. 

 

Uncaught TypeError: gsap_TweenMax__WEBPACK_IMPORTED_MODULE_4__.TimelineLite.to is not a function

 

It's unclear for me what's causing this. (Wondering I might be doing something wrong with importing? or my react code?)

Below is the Comment component that I'm working on. 

 

import React, { Component } from 'react'
import axios from 'axios';
import TimeAgo from 'react-timeago'
//typical import
import {TweenMax, Power2, TimelineLite} from "gsap/TweenMax";
 
export default class Comment extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isEditing: false,
            isDeleting: false,
            play: false,
            comment: {
                title: this.props.comment.title,
                content: this.props.comment.content,
                number: this.props.comment.number,
                time: this.props.comment.time
            }
        }
        this.handleEdit = this.handleEdit.bind(this);
        this.deleteConfirm = this.deleteConfirm.bind(this);
        this.deleteTransition = this.deleteTransition.bind(this);
        this.delete = this.delete.bind(this);
        this.deleteAfter = this.deleteAfter.bind(this);
        this.edit = this.edit.bind(this);
        this.cancel = this.cancel.bind(this);
        this.update = this.update.bind(this);
        // reference to the DOM node && reference to the animation
        this.myElement = null;
        this.myTween = null;
        this.deleteTween = null;
    }

    edit() { this.setState({ isEditing: true }); }
    cancel() { this.setState({ isEditing: false }) }
    update() {
        const obj = {
            title: this.state.comment.title,
            content: this.state.comment.content,
            number: this.state.comment.number
        };
        axios.post('http://localhost:4000/post/update/' + this.props.comment._id, obj)
            .then( res => {
                console.log('Updated');
                this.setState({
                    isEditing: false
                })
            });
    }

    deleteConfirm() {
        this.setState(prevState => ({
            isDeleting: !prevState.isDeleting
        }))
        this.myTween.reverse();
        
        console.log(this.state.isDeleting);
    }
    deleteTransition() {
        this.deleteTween.play();
    }
    deleteAfter() {
        console.log('Delete after called');
        
    }
    delete() {
        // console.log(this.props.comment._id);
        axios.get('http://localhost:4000/post/delete/' + this.props.comment._id)
            .then(
                this.props.removeComment(this.props.comment, this.props.comment._id)
            )
            .catch(err => console.log(err))
    }
    handleEdit = event => {
        const { value, name } = event.target;
        this.setState({
            ...this.state,
            comment: {
                ...this.state.comment,
                [name]: value
            }
        });
    }
    componentDidMount() {
        this.myTween = TimelineLite.to(this.myElement, .4, { opacity: 0.4, x: -80, ease: Power2.easeOut }).paused(true);
        this.deleteTween = TimelineLite.to(this.myElement, .4, { opacity: 0, x: -400, ease: Power2.easeOut, onComplete: this.deleteAfter }).paused(true);
    }

    render() {
        // const { title, content, number, time } = this.props.comment;
        if (this.state.isEditing) {
            return (
                <div className="post-block">
                    <input type="text" name="title" autoComplete="off" value={ this.state.comment.title } onChange={ this.handleEdit } placeholder="Write Title..."></input>
                    <textarea type="text" name="content" autoComplete="off" value={ this.state.comment.content } onChange={ this.handleEdit } placeholder="Write Content..."></textarea>
                    <input type="number" name="number" autoComplete="off" value={ this.state.comment.number } onChange={ this.handleEdit } placeholder="Write Number..."></input>
                    <button onClick={ this.update }>Update</button>
                    <button onClick={ this.cancel }>Cancel</button>
                </div>
            )
        } else {
            let time = new Date( this.state.comment.time );
            console.log(time);
            return (
                    <div className="post-block">
                        { this.state.isDeleting ? 
                            <div className="flex-container">
                                <button onClick={ this.deleteTransition }>I'm sure! Get rid of it!!</button>
                                <button onClick={ this.deleteConfirm }>Cancel</button>
                            </div>
                            : null 
                        }
                        <div ref={div => this.myElement = div} className={ this.state.isDeleting ? this.myTween.play() : null }>
                            <h4 className="title">{ this.state.comment.title } </h4>
                            <p><TimeAgo date={ this.state.comment.time }>{({ value }) => <p>{ value }</p>}</TimeAgo></p>
                            <p className="content">{ this.state.comment.content }</p>
                            <p>{ this.state.comment.number }</p>
                            <div className="change">
                                <button onClick={ this.edit }>Edit</button>
                                <button onClick={ this.deleteConfirm }>Delete</button>
                            </div>
                        </div>
                    </div>
            )
        }
        
    }
}

 

 

[GreenSock]

Welcome to the forums, @Minjong! 

 

It looks like your imports are fine, but the problem is that you've got some malformed code, like: 

//BAD: (there's no such thing)
TimelineLite.to(...)

//GOOD: 
var tl = new TimelineLite(); //create a new timeline instance
tl.to(...); //then add stuff to it

 

Does that clear things up? 

 

[Minjong]

Thank you @GreenSock for your quick reply! It fixed the problem 

I was using react so I wrote like so: 

 

this.myTween = new TimelineMax();
this.myTween.to(this.myElement, .4, { opacity: 0.4, x: -80, ease: Power2.easeOut }).paused(true);