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

(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> ) } } }