Search the Community

I'm trying to upgrade a GSAP v2 integration in a large codebase to GSAP v3. Instead of one global import for GSAP + plugins, I've created feature imports like in the installation examples from the documentation: This is working fine in a (local) Webpack dev-server environment. However when i'm generating Webpack SSR production builds it seems like non compatible SSR code is leaking from the imported GSAP modules. Even with the client/server check when registering plugins. I'm running this generated SSR bundle on a IIS environment with a V8 engine for processing the SSR javascript. Has anyone encountered the same behaviour? If so, any help is much appreciated!

Hi, I am working on a project using the DrawSVGPlugin, and using native JS that's compiled with gulp and webpack. I'm importing gsap and the plugin as such : import gsap, { TimelineLite} from 'gsap'; import * as drawSVG from '../gsap-extras/DrawSVGPlugin.js'; and the registering the plugin in the constructor of my component's class using : gsap.registerPlugin(drawSVG); Then, I simply want to test the plugin doing something like : new TimelineLite().set([this.anchorCircles, this.anchorFillCircles], { drawSVG: 0 }); This is actually working as long my gulp server is watching the changes and displaying the development JS, but after running a build, I'm able to log the drawSVG imported, but the TimeLine().set wont have any effect on my elements. I can't provide my gulp config if this is needed, but may be there's something simpler that I am missing here.. Thank you EDIT: // Finally found that the way the webpack was configured prevented the minified plugin to work. I had to change the webpack babili plugin to webpack minify plugin !

Hello, I use TweenMax in React, no worries until then. Now I would like to use the TextPlugin plugin but I can't get it work with the import... import {TweenMax} from "gsap"; const TextPlugin = require("gsap/TextPlugin"); const About = () => { let xpRef = useRef<HTMLHeadingElement>(null); let educRef = useRef<HTMLHeadingElement>(null); useEffect(() => { TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"}); TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3}); }, []); I test that too : import {TweenMax, TextPlugin } from "gsap/all"; const plugins = [TextPlugin]; const About = () => { let xpRef = useRef<HTMLHeadingElement>(null); let educRef = useRef<HTMLHeadingElement>(null); useEffect(() => { TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"}); TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3}); }, []); Both of them didn't work Many thanks in advance

Hi! I have gsap installed as a node module. And I have Webpack which gathers all modules from stack.js and outputs minified bundle. When I load the JS bundle into the page returns error that "gsap is not defined". The gsap modules are added because bundle's size is over 90kB. stack.js import { gsap } from 'gsap'; import { CSSPlugin } from 'gsap/CSSPlugin'; import { Draggable } from 'gsap/Draggable'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin); import '../build/my_module.min.js'; my_module.js (if we exclude all ES6 wrapping) looks like this: let moduleFunction = function() { 'use strict'; const hello = 'hello!'; console.log(hello); window.hello = hello; gsap.set('body > div', { backgroundColor: '#333333' }); } moduleFunction(); Whenever I call gsap methods it appears to be undefined. If I exclude gsap from my module everything works fine. Spent long time online trying to fix this, but nothing helped. What I'm doing wrong? Thanks!

Hello all !! Im new on the forum, so nice to meet you all So, here is my problem: I purchased the club greensock license in order to get thoses nice features but i can't get it to work with Vue and Webpack (webpack template + vue-cli). But since im using the enhanced version of the framework, im not getting files from NPM anymore, i got to use the source from the zip archive. So im a big noob with webpack, i discover webpack with version 1.x, i was horrify, since V2 seems more friendly user, i deciding to use it with Vue, and since we have Vu-cli, well you have to go with Webpack if your using Vue Anyway, i don't know how to make it work. If somone got an idea for the configuration, the way to `import` Plugins ? I'd like to use MorphSVGPLugin, but i just don't know how to get it. I tried everything... I also created a local npm package... But it didn't worked... I need to got my website online on Thursday, i really need help ^^ PS: with the free license, i can get things running because i'm using it like this: import { TweenLite, ... } from 'gsap' How can i do this for the MorphSVGPlugin ? Thx for future help, and thx for GSAP, very nice framwork

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work. The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined" Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.

I try to include RaphaelPlugin from npm and build it with webpack. On the development everything works well, the plugin is included and all good. On production build though the RaphaelPlugin is missing from the build. I tried multiple ways to include the file, but still something is wrong in production. Any ideas? import 'gsap/TweenLite'; import 'gsap/TweenMax'; import 'gsap/TimelineMax'; import * as RaphaelPlugin from 'gsap/umd/RaphaelPlugin';

Hi , i just include tweenmax, cssplugin and cssruleplugin into my webpack config file and i followed the documentation problem is when i create a tween using cssRule its gives me "Uncaught Cannot tween a null target" import { TweenMax } from "gsap/all"; import CSSRulePlugin from "gsap/CSSRulePlugin"; import CSSPlugin from "gsap/CSSPlugin"; var menuLine = CSSRulePlugin.getRule(".header__outer:after"); TweenMax.to(menuLine, 1, {cssRule:{color:'#FFF'}});

At the risk of being a little off gsap in this question I'm hoping anybody could help me with this. As I figured I'm probably not the only one having this situation with using gsap and webpack and wanting to mangle during minify. In Webpack I'm using babel to transpile gsap from 'gsap/all'. By imports it also going through the uglifgyjs-webpack-plugin (or uglifyjs-3-webpack-plugin or terser-webpack-plugin) perfectly fine with minifying (I tried all three webpack plugins and they have the same config-interface). I'm using this setup for months now without any problem and I am very satisfied with it, but now I want to mangle my source code and that's a different story. Enabling mangle doesn't throw problems and works, but when I set mangle.properties to true to mangle my properties things are starting to throw errors because the browser can't find things no more. The things it can't find are all inside the gsap lib and other libs like createjs I use. So what I try for days now in all kind of ways is to exclude the libs from the mangling. But so far without success. I tried putting things like 'TweenLite', 'TweenMax' and all in the reserved array (mangle.reserved) of the config object of the minifier (and also in the mangle.properties.reserved), but it doesn't seem to help or I am doing things wrong. I even tried skipping the minifier for the whole node_modules folder with a regEx property of the plugin, but I believe that's not working because uglifgyjs or terser webpack plugin only seem to minify at the very end of the buildflow, so after combining every javascript source into one file. And there seems to be no way to only minify/mangle webpack trunks before that (yet). I also tried using the regex-property inside mangle.properties (mangle.properties.regex) to only mangle properties that are important to mangle. But when I for example put a regex to mangle the property 'settings' it isn't that clever and just seems to replace all properties named 'settings', which could be totally different properties from different objects in my code. So that doesn't seem to be working as wanted or I am missing something perhaps. After days of working on this I'm kind of stuck on how to get this mangle to work. And I would be very surprised if it's not possible to leave libs out of the minifier/uglifier or having them still in but without 'can't find this and that' issues. This seems like a pretty basic workflow to me a lot of developers are probably using. I just think it's hard to believe there's nothing build in the module to get this to work, so I'm sure I'm missing something. How are other developers make mangling work on webpack without the can't find issues, like 'can't find Power4' of used libs? And I also can't find a reason why it can't find things in the mangled output, while the uglify plugin knows all code that is being used, because it's combined by webpack to one single file with everyting in there, all source code, all libs, so all references to objects and properties should be known by the mangler I'd say to mangle without problems. Perhaps webpack is making mangling more difficult, because the webpack output is pretty different, but still, this is a webpack-plugin I'm using, so it should know everything in there... Can't get my head around this. I'm stuck. So I passionately hope anybody here could give me a clue or could share their knowledge on how you guys keep gsap out of the mangle while using webpack 4! Thanks!!

Hello community ! I'm having trouble importing plugins. I use the gsap npm doc with gsap v2.0.2. When I use this : import { TweenMax } from 'gsap'; TweenMax works perfectly fine. But when I want to use the scrollToPlugin with this for example : TweenMax.to('.my-div', 2, { scrollTo: { y: 'max' } }); I do this : import { TweenMax, ScrollToPlugin } from "gsap/TweenMax"; or import { TweenMax, ScrollToPlugin } from "gsap/all"; I get errors saying : TweenMax.js:13 Uncaught SyntaxError: Unexpected identifier or all.js:13 Uncaught SyntaxError: Unexpected identifier Thank you very much for your help !

Hi, I was wondering whether someone might be able to help me?.. I am writing a single page kiosk application which has a full screen menu. i rather liked the example here: https://greensock.com/stagger an have been using it as starting point but I have come across a head scratching issue... I have attached a code pen example https://codepen.io/alifixit/pen/YJPQEe with the basic idea of way i am showing and hiding the pages from a main menu based on the Greensock example. I am not sure i am making a major error with the way i am going about this? The pen is working correctly, my app is even working correctly in my development environment but when i compile it and run it on a different machine there are some strange things happening but only with this animation! I am using electron and webpack, everything works fine on my dev machine and even the compiled version works perfectly on that. But, when i compile it and run it on a different machine, weird things start to happen but only with this animation...obviously the first thing to think is there must be something wrong with electron or webpack but, I have investigated the way wepack is compiling it and that seems ok, i am not packaging the files into an asar at this stage.. i have peppered the code with console logs to try and establish what is going wrong but there are no errors at all in the console and everything seems to be reporting as expected. it's just this animation does some very random things... I have tried it on 4 other machines and they all share this weirdness with this animation. The problems are that the animations do not seem to reset themselves correctly after the first time it is run.. the sizes are incorrect sometimes and occasionally some of the buttons opacity is incorrect. Looking at the inspector on a machine it is not working on in a compiled version, the transformation matrices do not seem to reset to where the should. I don't know why on earth it should be any different between machines but i may be doing something fundamentally wrong with the approach i am taking here as this is my first adventure with greensock so i am probably messing up badly! I know it's a tricky one to help with as the pen works.. but, i guess the main questions are: 1) am i using the timeline correctly by creating a new one each time the function is called or is this likely to cause a problem? i.e function menuEntrance(callback) { var timeline = new TimelineMax(); timeline.set(".btn", { visibility: "visible", y: 0, opacity: 1 }) .staggerFrom(".btn", 2, { scale: 0.5, opacity: 0, delay: 0.5, ease: Elastic.easeOut, force3D: true }, 0.2) .eventCallback("onComplete", function () { if (callback) { callback() } }); } 2) is this the best way to do this? 3) has anyone else experienced any issues like this? are there any reasons why the timeline may stop without completing - the callbacks are fired? UPDATE: So i have tried several different versions of GS and using a CDN in the HTML rather than webpack, stripped the app back to the bare bones and still getting the issues, i have also tried it without a timeline using TweenMax https://codepen.io/alifixit/pen/BqyPJv That doesn't help in the app.. the only thing i can think of as to why it is different and why it works in the pen and dev machines and not the others is that the specs of machines are slightly different? the app is working with base64 images as css backgrounds would this have anything to do with it. I think also i need to reset the css afterwards, i have played with clearProps and resetting various different things but i'm not sure how to do it correctly so it doesn't jump around and ruin the effect? UPDATE: Ok, so i tried changing to <IMG> tags, no improvement... adding scale : 1 to the menuEntrance TweenMax.set means they all appear the same size now, which is great but often some do not appear... Any help or suggestion are very much appreciated!!!!! Many Thanks!

Hey there, thanks for the amazing plugins, awesome work. I have been trying to figure out the best way to use gsap with webpack, i tried to avoid the imports-loader and started using aliases. But since i have to include each single plugin, i was wondering if it really is the right approach. i can import the plugins normaly with : import ScrollMagic from 'scrollmagic'; import 'animation.gsap'; import 'debug.addIndicators'; import TweenLite from 'TweenLite'; import EasePack from 'EasePack'; but its a big mess in the webpack.config: alias: { TweenLite: path.resolve(__dirname, '../src/scripts/vendor/greensock/TweenLite.js'), TweenMax: path.resolve(__dirname, '../src/scripts/vendor/greensock/TweenMax.js'), TimelineLite: path.resolve(__dirname, '../src/scripts/vendor/greensock/TimelineLite.js'), TimelineMax: path.resolve(__dirname, '../src/scripts/vendor/greensock/TimelineMax.js'), EasePack: path.resolve(__dirname, '../src/scripts/vendor/greensock/easing/EasePack.js'), AttrPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/AttrPlugin.js'), BezierPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/BezierPlugin.js'), ColorPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ColorPropsPlugin.js'), CSSPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/CSSPlugin.js'), CSSRulePlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/CSSRulePlugin.js'), DirectionalRotationPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/DirectionalRotationPlugin.js'), DrawSVGPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/DrawSVGPlugin.js'), EaselPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/EaselPlugin.js'), EndArrayPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/EndArrayPlugin.js'), ModifiersPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ModifiersPlugin.js'), MorphSVGPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/MorphSVGPlugin.js'), Physics2DPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/Physics2DPlugin.js'), PhysicsPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/PhysicsPropsPlugin.js'), RaphaelPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/RaphaelPlugin.js'), RoundPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/RoundPropsPlugin.js'), ScrambleTextPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ScrambleTextPlugin.js'), ScrollToPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ScrollToPlugin.js'), TEMPLATE_Plugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/TEMPLATE_Plugin.js'), TextPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/TextPlugin.js'), ThrowPropsPlugin: path.resolve(__dirname, '../src/scripts/vendor/greensock/plugins/ThrowPropsPlugin.js'), ScrollMagic: path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), 'animation.gsap': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), 'debug.addIndicators': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'), }, is this the best approach? thanks a lot. Cheers, Hendrik

Well I have this bundling process: Starting with coffeescript files being transpiled to their counterpart js files in single directory. So for all those JS files I can include and use them then with: require "./moduleX.js" Then bundle them with webpack to a single bundle.js And then I use pug to include the bundle.js into the single HTML file. The Problem: When using import TweenMax from "gsap/TweenMax" weird strings appear in the HTML outside of script tags and render the whole HTML useless. Such strings are: "\n\t\t\t *\n\t\t\t * @param {!string} ns The namespace of the class definition, leaving off \"com.greensock.\" as that's assumed. For example, \"TweenLite\" or \"plugins.CSSPlugin\" or \"easing.Back\".\n\t\t\t * @param {!Array. <string>} dependencies An array of dependencies (described as their namespaces minus \"com.greensock.\" prefix). For example [\"TweenLite\",\"plugins.TweenPlugin\",\"core.Animation\"]\n\t\t\t * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.\n\t\t\t * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)\n\t\t\t */\n\t\t\tDefinition = function(ns, dependencies, func, global) {\n\t\t\t\tthis.sc = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses\n\t\t\t\t_defLookup[ns] = this;\n\t\t\t\tthis.gsClass = null;\n\t\t\t\tthis.func = func;\n\t\t\t\tvar _classes = [];\n\t\t\t\tthis.check = function(init) {\n\t\t\t\t\tvar i = dependencies.length,\n\t\t\t\t\t\tmissing = i,\n\t\t\t\t\t\tcur, a, n, cl;\n\t\t\t\t\twhile (--i > -1) {\n\t\t\t\t\t\tif ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {\n\t\t\t\t\t\t\t_classes[i] = cur.gsClass;\n\t\t\t\t\t\t\tmissing--;\n\t\t\t\t\t\t} else if (init) {\n\t\t\t\t\t\t\tcur.sc.push(this);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (missing === 0 && func) {\n\t\t\t\t\t\ta = (\"com.greensock.\" + ns).split(\".\");\n\t\t\t\t\t\tn = a.pop();\n\t\t\t\t\t\tcl = _namespace(a.join(\".\"))[n] = this.gsClass = func.apply(func, _classes);\n\n\t\t\t\t\t\t//exports to multiple environments\n\t\t\t\t\t\tif (global) {\n\t\t\t\t\t\t\t_globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = windows.gs = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the window.com.greensock object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)\n\t\t\t\t\t\t\tif (typeof(module) !== \"undefined\" && module.exports) { //node\n\t\t\t\t\t\t\t\tif (ns === moduleName) {\n\t\t\t\t\t\t\t\t\tmodule.exports = _exports[moduleName] = cl;\n\t\t\t\t\t\t\t\t\t ... I did not manage yet to stop webpack from using eval. Which could be part of the problem. I do have a workaround where I don't use npm, just adding the TweenMax.min.js to the same directory as the other js files and use TweenMax = require "./TweenMax.min.js" The problem is when using the MorphSVGPlugin it requires the module TweenLite as npm module. ERROR in ./compiled/js/plugins/MorphSVGPlugin.min.js Module not found: Error: Can't resolve 'TweenLite' in './compiled/js/plugins' So has anyone an idea on the issue with the thought build process? Or does anybody have an idea how I can get the workaround to also work for the MorphSVGPlugin? Help would be very appreciated

Hello @GreenSock Jack or somebody else who could help met with this, For a while now I'm using webpack together with the gsap npm package and uglifyjs. I keep things up to date and so far everything was working fine, until today. After updating the gsap package from 1.20.4 to 1.20.6 suddenly uglifyJs starts complaining. I only updated gsap, so only the gsap module has changed. I just found out gsap 1.20.4 works fine, and the problem starts with gsap 1.20.5: After searching for a solution I found that gsap 1.20.5 contains es6 code, which is not there in 1.20.4. This is what I see in TweenLite (1.20.5): const gs = _gsScope.com.greensock; export { TweenLite as default }; export const SimpleTimeline = gs.core.SimpleTimeline; export const Animation = gs.core.Animation; export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope; export const EventDispatcher = gs.events.EventDispatcher; UglifyJs here complains about the constant destructuring on the forelast line which it doesn't understand: 'Name expected' But even if it did understand it and continues its process, I would had a problem, because my project should output es5 and uglifyjs comes after transpiling. So this untranspiled es6 code is causing problems with uglifyJs in the webpack workflow. Also the minified versions of gsap 1.20.5 seem to have untranspiled es6 code now. I can't set UglifyJs to be on es6, because I want my project to output es5 code and uglifyJs is after the transpiling, like it should in webpack. My own projectcode is written in es6 and I use webpack babel to transpile to es5, but Babel is not transpiling the node_modules folder and I really like to keep it that way and think of that as best practice. I see most of the gsap code still is written in es5, so my guess would be something went wrong compiling the lib. But the above es6 lines (maybe more?) are in all gsap folders (gsap, gsap/umd, gsap/src/minified and gsap/src/uncompressed). Did something go wrong? Or am I missing something here? Thanks in advance!

Hi everyone, I try to import DrawSVG with webpack but I have an error. ERROR in ./resources/assets/js/plugins/DrawSVGPlugin.js Module not found: Error: Can't resolve 'TweenLite' in import { TweenMax, TimelineMax } from "gsap"; import DrawSVGPlugin from './plugins/DrawSVGPlugin'; import Draggable from 'gsap/Draggable'; For informations, Draggable works well. The DrawSVGPlugin version is the last : 0.1.2. Thank's

Hey everyone, Judging by the forum posts, i'm pretty certain this issue has been posted a thousand times before but after a few hours I thought I'd try here. I've done the following: - created a new project created with preact-cli, - copied club member minified plugin DrawSVGPlugin, Draggable and ThrowPropsPlugin to a /src/vendor directory - imported DrawSVGPlugin in my app.js I recieve the following error: ✖ ERROR ./src/vendor/DrawSVGPlugin.min.js Module not found: Error: Can't resolve '../TweenLite.min.js' in .... Attempted to add the aliases to the preact.config.js file by adding config.resolve.alias.TweenLite = [path to node_modules gsap] but it didn't work. I haven't posted any code but I can setup a dummy project if need be. Any help is greatly appreciated. Cheers, Topher.

Anyone have any luck with angular2 and split text. when i try and run it on a component thats part of a template it bombs out complaining about SplitText .length which to me just says its not getting the template from Angular?? export class AboutBgComponent implements AfterViewInit { private spicy = "this is my text"; private mySplitText:any; constructor() {} ngAfterViewInit() { this.mySplitText = new SplitText(this.spicy, {type:"words"}); console.log(this.spicy) } } tried in the constructor, tried after init as well as a bunch of other things not included in this demo. So anyone who can spin up an angular2 app and let me know?

Hey folks, I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack. All the plugins are in the folder: /node_modules/gsap I'm using Vuejs and my component looks like: <template lang="html"> <div> <div id="animate" @click="animateIt"> content </div> </div> </template> <script> import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap' export default { name: 'ComponentName', data: () => ({ var_1: 'dummy' }), methods: { animateIt: function() { var t1 = new TimelineMax() t1.to('#animate', .2, { opacity: 1, ease: Sine.easeInOut }) .to('#animate', .2, { css: { color: red, }, ease: Sine.easeIn }) } }, mounted() { GSDevTools.create() } } </script> For others plugins they work as expected so i can import them when needed using for example: import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap' But if I add the GSDevTools as for the others this doesn't work. If I import the plugin with: import {GSDevTools} from 'gsap' // or import GSDevTools from 'gsap/GSDevTools' // or import GSDevTools from '../../../node_modules/gsap/GSDevTools' // or import * as GSDevTools from '../../../node_modules/gsap/GSDevTools' // or var GSDevTools = require ('gsap/GSDevTools') // or var GSDevTools = require ('../../../node_modules/gsap/GSDevTools') I got this error: I'm stucked, please Help!!! Thanks

Hello, Maybe its a silly question but i was wondering the best way to get gsap into our project. Because i have paid the license, now i have a src/ folder with all the files. Before that i was using nicely the npm/yarn package for the gsap free version. But now i have to use the local ones ? This doesn't look the best too keep my gsap plugins updated. Am i suppose to check the web for new versions ? Or there is a way to load this "paid" plugins into my project as a npm package. Thanks in advance.

I am refactoring and running cleanup on a production app, and optimizing dependencies. We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize. Originally, we just imported the whole GSAP library via NPM like so: import 'gsap'; Per the GSAP npm docs (https://www.npmjs.com/package/gsap)... Now, I'd like to trim the fat off our import, and switched to: import { TimelineLite } from 'gsap'; However, this is compiling correctly but throwing the following client-side error: Uncaught TypeError: _gsap.TimelineLite is not a constructor Does anyone know why this is? Our weight savings from importing `TimelineLite` alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically? ---------- NOTES: I have also tried this with no luck. import { TweenLite, TimelineLite } from 'gsap'; Strangely, this does not work either: import { TweenMax, TimelineLite } from 'gsap'; but this does (for obvious reasons): import { TweenMax } from 'gsap'; Here is the animation we are using, super basic: new TimelineLite() .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 }) .fromTo('#urlCopyMessage', 0.35, { opacity: 0, y: 20 }, { opacity: 1, y: -30 } ) .to('#urlCopyMessage', 0.35, { opacity: 0, delay: 0.25 } ) .to('#urlCopyMessage', 0, { visibility: 'hidden' });

Hello The People of Greensock, I've been working with a static site generator for react lately - Gatsby.js. One of the components has a menu animation attached. In development the animation works just fine, but when deployed it just doesn't trigger. Code is bundled and minified with webpack. The weird thing is, GSAP loads up properly, the console is clear, no errors. It's hard to investigate more since code after minification and bundling is hard to read in chrome dev tools. :/ I'm not sure if this is related to my GSAP setup, but if anyone could take a look at the code, it would be awesome. This is the navAnimation itself: import { TimelineLite, CSSPlugin, Power2, Power3 } from 'gsap'; import * as CSSRulePlugin from 'gsap/CSSRulePlugin'; const slideDownTl = new TimelineLite({ paused: true, initialRender: true }); const slideUpTl = new TimelineLite({ paused: true, initialRender: true }); // Document-object-aware variables let menuBtn, menuList, shutter, shutterBf, shutterAft, menuSpans, menuSpansAfts; if (typeof window !== 'undefined' && typeof document !== 'undefined') { document.addEventListener('DOMContentLoaded', function() { // Menu Button menuBtn = document.querySelector('.menu-btn'); // Menu List menuList = document.querySelector('.list-nav'); // Shutter Variables shutter = document.querySelector('.shutter'); shutterBf = CSSRulePlugin.getRule('.shutter:before'); shutterAft = CSSRulePlugin.getRule('.shutter:after'); // Menu Span Variables menuSpans = document.querySelectorAll('.menu-span'); menuSpansAfts = CSSRulePlugin.getRule( '.list-nav ul li .menu-link a .menu-span:after' ); console.log('we passed window+document check!'); // slideDown Animation Timeline slideDownTl .set([shutterBf, shutterAft], { cssRule: { y: '-120%' } }) .set(menuBtn, { pointerEvents: `none` }) .set([menuList, shutter], { visibility: 'visible' }) .set(menuSpans, { y: '-200%' }) .timeScale(1.2) .staggerTo( [shutterBf, shutterAft], 1, { cssRule: { y: '0%' }, force3D: true, rotation: 0.01, ease: Power3.easeOut }, 0.3 ) .staggerTo( menuSpans, 0.5, { y: '0%', ease: Power2.easeInOut }, 0.1, '-=0.7' ) .set(menuBtn, { pointerEvents: `all` }); // slideUp Animation Timeline slideUpTl .set(menuBtn, { pointerEvents: `none` }) .staggerTo(menuSpans, 0.5, { y: '-200%', ease: Power2.easeIn }, 0.1) .staggerTo( [shutterAft, shutterBf], 0.75, { cssRule: { y: '-120%' }, force3D: true, rotation: 0.01, ease: Power2.easeIn }, 0.25, '-=0.4' ) .set([menuList, shutter], { visibility: 'hidden' }) .set(menuBtn, { pointerEvents: `all` }); }); // end DOMContentLoaded } // end if window !== undefined export const slideDown = () => { slideDownTl.play(0); }; export const slideUp = () => { slideUpTl.play(0); }; I check for window and document !== undefined, because Gatsby requires it on build. This is Header component which has navAnimation included: import React from 'react'; import Link from 'gatsby-link'; import './navigation.scss'; import * as navAnimation from '../../static/navAnimation.js'; class Header extends React.Component { constructor(props) { super(props); this.state = { isOpened: false }; this.menuToggle = this.menuToggle.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); } handleClickOutside(e) { let clickInHeader = false; if (e.path) { clickInHeader = e.path.find(node => node.localName === 'header'); } !clickInHeader && this.menuToggle(); } menuToggle(e) { if (this.state.isOpened) { navAnimation.slideUp(); document.removeEventListener('click', this.handleClickOutside, true); } else { navAnimation.slideDown(); document.addEventListener('click', this.handleClickOutside, true); } this.setState(prevState => { return { isOpened: !prevState.isOpened }; }); } render() { return ( <header> <h1> <div className="logo"> <Link to="/" onClick={this.state.isOpened && this.menuToggle}> <span>Seba</span> <span>Hewelt</span> </Link> </div> </h1> <div id="menu-btn-wrapper"> <button className={this.state.isOpened ? 'menu-btn open' : 'menu-btn'} onClick={this.menuToggle}> <svg className="stick" viewBox="0 0 70 32"> <path d="M 5 5 H70 L 5 21" /> <path d="M 5 15 H70 L 5 31" /> </svg> </button> </div> <div className="shutter" /> <nav className="list-nav"> <ul> <li> <div className="menu-link" onClick={this.menuToggle}> <Link to="/my-work"> <span className="menu-span">my work</span> </Link> </div> </li> <li> <div className="menu-link"> <Link to="/blog" onClick={this.menuToggle}> <span className="menu-span">blog</span> </Link> </div> </li> <li> <div className="menu-link"> <Link to="/#contact" onClick={this.menuToggle}> <span className="menu-span">contact</span> </Link> </div> </li> </ul> </nav> </header> ); } } export default Header;

OUTDATED! These webpack issues are getting out of hand, so I made a little demo to help you get started. But first, have you considered not importing GSAP? I would suggest using a CDN instead as your app will load much faster since it's not included in the bundle and can be pulled directly from the user's browser cache. GSAP is available on both cdnjs and jsDelivr. JsDelivr is kind of unique in that you can bundle all your files up in a single HTTP request! And dependencies that are not resolved by webpack can still become dependencies of the output by using the externals option. For example, if you are using React you could do this using the unpkg CDN. <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> And then in your webpack.config, you would configure those libraries like this... module.exports = { externals: { "react": "React", "react-dom": "ReactDOM" }, ... }; If that's not an option for you, here's the repo I made. To run it, install webpack and the dev-server first npm install webpack webpack-dev-server -g, and then npm install to install the demo. Use npm start to start the dev-server on port 8080. If you're wondering where my gsap import is, there isn't one. I made TweenMax global using the ProvidePlugin. https://github.com/OSUblake/gsap-webpack

I read every topic about angular and webpack but I can't still solve the issue - how to use Pro functions in angular I have downloaded this repository https://github.com/AngularClass/angular-starter then I created private npm package called 'my-business-gsap' (in a folder on the desktop by npm init - and fill only necessary fields) I copied files from common-js plus folders 'minified' and 'uncompressed' then I went back to project and add my private package by npm install "path to folder" I added folder with gsap typescript definitions and wrote reference to custom-typings.d.ts And If I want to use it, I have to add it part by part like that (simple - import 'my-business-gsap' not working) import { Component, OnInit }from '@angular/core'; import { TweenMax } from 'my-business-gsap' import { EasePack } from 'my-business-gsap' import { TimelineMax } from 'my-business-gsap' import { CustomEase } from 'my-business-gsap' import $ from "jquery"; @Component({ selector: 'home' templateUrl: './home.component.html' }) export class HomeComponent implements OnInit { constructor() {} public ngOnInit() { var element = $("#coin > div"); var timeline = new TimelineMax({ repeatDelay: 1.2, repeat: -1, yoyo: false }); timeline .to(element, 0, { rotation: 1 }) //.. more code... .staggerTo(element, 1.5, { rotation: -1260, ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.332,0.678 0.654,0.808 0.819,0.875 0.88,0.874 1,1") }, .06) //.. more code... } } Simple Tweens or Timelines are ok but things like CustomEase... is possible to compile but in chrome its throw message core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined CustomEase is undefined Is there somebody who could help me, please?

When I am running my angular4 application and i start on a specific route, and navigate to any other route, I get this error ERROR TypeError: Cannot read property 'hasAttribute' of null When I search my entire project and all loaded dependencies, one of the files that uses hasAttribute is TweenMax and ScrollMagic. Does that mean my errors has to be somewhere in TweenMax or ScrollMagic. It looks like the app is trying to load or find a dependancy, as the error is piped out in the Webpack Bundle right before GSAP starts. If i start on app.about as my route, and goto app.contact or app.welcome or app.portfolio I get the hasAttribute error when I leave the about scene. I destroy a scrollmagic scene on leave but i do that in another place on another route and don't get this cryptic error. if i start on ANY other route, and goto about and then off about, i never get that error. So i guess my question is, do you think this is TweenMax related? assuming that error is thrown? or could there be a possibility that its something with webpack packing tweenmax, or maybe something else not necessarily TweenMax. I tried to clear the component in that route out to be 100% blank, and it still happens. The only time it doesnt happen is if i obviously start from another route, or I remove tweenmax and scrollmagic from my app, and then it works again.. i kinda feel this question will be hard to answer without someone just looking at the source 100%, so im not expecting much but just wondering if anything clicks for anyone?

there appears to be an issue with the ordering of gsap related imports in webpack. i had seen and mentioned this in one of our earlier threads, but was finally able to narrow down when it happens. i'm working on something where i'm trying to utilize several classes from the gsap library, and noticed when attempting to introduce TweenMax that it logs out as an empty object, and therefore i am not able to utilize it. TweenLite is also in the project, as well as BezierPlugin. the problem appears to be resolved if TweenMax gets imported before BezierPlugin, but hopefully this could be rectified as it is confusing to users, and in large organizations some codebases are subjust to strict linting rules that would prevent the reordering of imports. including zip file of simplified project with comments. Archive.zip