monty

I found out what the issue was. It wasn't webpack or webpack-dev-middleware thank goodness as I was not looking forward to that maze. Turns out a version of gsap was been added directly to the index page from a CDN. I was not aware of this until I had to add an attribute to the index head and boom there I saw TweenMax been added. This was a bad surprise that turned into a happy moment as I figured out why the import was not working. Thanks again for the help here.

Thanks @GreenSock, Yep my head was spinning especially when it comes to webpack. I hopefully will have more time when the project is finished to go through webpack more and break down each part. No worries I know the folks who chimed in here were trying to help which is nice to see a good community. I can import the entire packages globally which is not ideal but I'll write back if I can find a fix. import 'gsap';

Thanks @OSUblake for the download demo. As you can see from my code I posted above my webpack settings are similar in what they do. I spent all day yesterday adding and removing from my config only to realize i'm doing the same as this download link is. The only difference I can see is I'm running weback through node using https://github.com/webpack/webpack-dev-middleware and https://github.com/glenjamin/webpack-hot-middleware I have yet to rip all this out and see if this is causing the issue. I'm aware its not a gsap issue and in fact said in my post it most lightly is a webpack issue. I was hoping by posting on here that someone might have ran into a similar issue. I appreciate the help and might do a post on stackoverflow with tags for webpack to see if I can get some webapck folks to chime in. Unfortunately for now I need to move forward with the project as I'm 2 days down trying to get this to work. I love greensock packages and will look into this when I have more time and see why my build setup might be causing this to happen.

For anyone that might know more about webpack and greensock together, here is my current setup while having the issue above. const path = require('path') const webpack = require('webpack') const ROOT_DIR = path.resolve(__dirname, '../app') module.exports = { devtool: 'eval', entry: [ `${ROOT_DIR}/js/index`, 'webpack-hot-middleware/client' ], output: { path: path.resolve(__dirname, '../public'), filename: 'bundle.js', publicPath: '/public/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new webpack.DefinePlugin({ "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL) }) ], module: { loaders: [ { test: /\.js?$/, loader: 'babel-loader', include: path.join(__dirname, '../app'), exclude: /node_modules/ }, { test: /\.scss?$/, include: path.join(__dirname, '../app', 'styles'), use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: { data: "$assetPath: '" + process.env.ASSETS_URL + "';" } } ] }, { test: /\.(jpe?g|png|gif|svg)$/i, include : path.join(__dirname, '../app', 'images'), loader : 'file-loader?limit=30000&name=[name].[ext]' }, { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, include : path.join(__dirname, '../app', 'fonts'), loader: 'file-loader?name=fonts/[name].[ext]' } ] } }

Thanks for the reply. Yea I see lots of folks making it work and I'm using the same setup. The only thing I can think might be causing it is webpack, but I don't have any issues with other modules import. Not sure if TweenMax is a global or its a module. I tried both your imports with the same problem. When I use the first import below and do a console.log("TweenMax = ", TweenMax) shows up but is missing a bunch of methods. When I import using the second statement then TweenMax is undefined. import TweenMax from "gsap"; import {TweenMax} from "gsap"; __proto__: constructor:ƒ Object() hasOwnProperty:ƒ hasOwnProperty() isPrototypeOf:ƒ isPrototypeOf() propertyIsEnumerable:ƒ propertyIsEnumerable() toLocaleString:ƒ toLocaleString() toString:ƒ toString() valueOf:ƒ valueOf() __defineGetter__:ƒ __defineGetter__() __defineSetter__:ƒ __defineSetter__() __lookupGetter__:ƒ __lookupGetter__() __lookupSetter__:ƒ __lookupSetter__() get __proto__:ƒ __proto__() set __proto__:ƒ __proto__() The above are the only methods I'm seeing no "fromTo" or all other methods that should be there.

I'm getting an error when trying to use TweenMax in React component. I create the component like this below. import React, {Component} from 'react'; import {connect} from 'react-redux'; import Thumbnail from './thumbnail'; import TransitionGroup from 'react-transition-group/TransitionGroup' import {fetchHomeCollection} from '../../actions/client'; import styles from '../../../styles/client/home.scss'; class Home extends Component { constructor(props){ super(props); } componentWillMount(){ this.props.fetchHomeCollection(); } firstChild(props) { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } renderThumbnails(){ const {collection} = this.props; if(collection.length <= 0) return <div>Loading...</div> return collection.map((photo, index)=>{ return( <TransitionGroup component={this.firstChild} key={photo._id}> <Thumbnail {...photo} delay={0.5 * index} key={photo._id}/> </TransitionGroup> ) }) } render(){ return ( <div id="home" className="flexbox-container"> {this.renderThumbnails()} </div> ) } } function mapStateToProps({photos}){ return{ collection: photos.collection } } export default connect(mapStateToProps, {fetchHomeCollection})(Home); then in my Thumbnail component I use the componentWillAppear to call my TweenMax fromTo method. import React, {Component} from 'react'; import { Link } from 'react-router-dom'; import {TweenMax} from "gsap"; export default class Thumbnail extends Component{ componentWillAppear(callback){ const el = this.container; TweenMax.fromTo(el, 0.3, {opacity: 0}, {opacity: 1, onComplete: callback}); } } Anyone know why I might be getting this error ?

I setup my new LoaderMax in a custom display class that gets added to the stage. When I remove that class and then try to create it again and add it to the stage I get an error when _queue is created again. So the second time around that queue gets created it throws an error. Error: _queue = new LoaderMax({name:"videoQueue", requireWithRoot:this, maxConnections:1, onProgress:videoProgress, onChildComplete:completeHandler}); Anyone know why this is happening second time around.

Hi is there anyway to tween a non native flash property with tweenLite. I want to use an object to hold a property called specialRotation for example and I want to update that property using tweenlite.to, how can I achieve. I tried using a getter and setter but that didn't work. var obj:Object = new Object(); private function get specialRotation():Number { return obj.specialRotation; } private function set specialRotation(value:Number):void { obj.specialRotation = value; } TweenLite.to(obj, 1, {specialRotation:90, onUpdate:onUpdateTest } ); private function onUpdateTest():void { trace("working = "+specialRotation); }

I already tried that and it does the same as its outside the transform. Any other ideas on this?

I have a sprite with a graphic in it that I want to grow in size from the top right hand corner point instead of the top left hand corner. I tried using thee transformAroundPoint function but it doesn't seem to work the way I'm talking about. Here is what I have setup now. transformPoint = new Point(this.x+ imageW, this.y); TweenMax.to(frame, 3, {transformAroundPoint:{point:transformPoint}, width:bmt.width, height:bmt.height, ease:Expo.easeOut});

How can you remove an object that has been inserted into timelineMax. Do I just set my timelineMax over again to remove all objects example: timeline = new TimelineMax({onComplete:onTimelineComplete}); What if I just want to remove one object instead of them all. Thanks, Eric