Search the Community

Hi there, I am very new to javascript and trying to keep the code readable. I want my timeline to be in a separate function and being played and reversed on a button click. However, the animation only fires forward, but never backwards and I cant get my head around it. If I put the timeline into the constructor method it suddenly works, but not if putting it into a separate function. The codepen is a very simplified version for the main issue. I'd glad if someone could lend me a helping hand. If you have better suggestions how to structure the code, I am very open to learn something. Just want to write it as clean as possible.

Hey there, happy new year first of all I am a bit confused with an animation i tried to achieve... i basically want to have each image separately animated and not all of them together...i tried to loop over all elements but its still animating all images together...would i need a timeline or is the approach completely wrong? const who = { trigger: [...document.querySelectorAll(".slide")], image: [...document.querySelectorAll(".slide img")], init: () => { who.trigger.forEach(element => { element.addEventListener("mouseover", who.animateOnMouseEnter); element.addEventListener("mouseout", who.animateOnMouseOut); }); }, animateOnMouseEnter: () => { console.log("animateOnMouseEnter"); who.image.forEach(element => { TweenMax.to(element, 0.25, { y: 35, ease: Power1.easeOut, repeat: 0 }); }); }, animateOnMouseOut: () => { console.log(" animateOnMouseOut"); who.image.forEach(element => { TweenMax.to(element, 0.75, { y: 0, ease: Bounce.easeOut, repeat: 0 }); }); }, debug: () => { // }, destroy() { // } }; who.init();

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!

Hi, I'd like to know how to import the Easing package when using ES6? Or any other for that matter. At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific). import { TweenLite } from "gsap"; TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })

Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal

Hi there, I have two javascript-files in my included in my html page, each calling this in it's beginning: import TweenLite from 'gsap'; Later, when I try to call the TweenLite.to function, I get this error in the second file that I include in my html: Uncaught TypeError: Cannot read property 'to' of undefined at bodyScroll (app.js:692) at HTMLAnchorElement.<anonymous> (app.js:640) at HTMLDocument.dispatch (jquery.js:5201) at HTMLDocument.elemData.handle (jquery.js:5009) Any ideas? EDIT: It seems like TweenLite pollutes the global namespace. Shouldn't this never be the case with browserify?

hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help

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 there, I know this might not be a pure gsap related issue, but I hope someone can point me into the right direction. I want to avoid the use of jQuery and instead want to use pure javascript with es6 syntax. Therefore I created a button.js file, in which I want to create the module for my button animation powered by gsap. The jQuery version already works, so I simply have to translate this version into an es6 module but I am failing and keep getting "Cannot tween a null target". Obviously I am doing something wrong in the es6 syntax, but I can't figured it out Here is my button.js – codepen throws the same error: import TweenMax from 'gsap'; export default class Button { constructor() { this.btns = document.querySelectorAll('.tg-btn'); this.init(); } init() { for(let i = 0, max = this.btns.length; i < max; i++) { let el = this.btns[i]; console.log(el); console.log(i); let a = el.querySelector('.inner1'); let b = el.querySelector('.inner2'); let c = el.querySelector('.inner3'); let d = el.querySelector('.inner4'); let e = el.querySelector('.inner5'); let m = 0; let n = 50; let o = "center"; let p = null; let tl = new TimelineMax({paused: true}); var t = tl .set(el,{willChange:"transform"}) .set([e[i], d[i]], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20}) .set(e[i], {rotationZ: "45deg"}) .set(d[i], {rotationZ: "-45deg"}) .to(a[i], .2, {opacity: 0,left: 15,ease: Sine.easeIn}) .to(c[i], .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1) .to(c[i], .5, {width: n,ease: Expo.easeOut}, .3) .to([e[i], d[i]], .2, {opacity: 1,ease: Sine.easeOut}, .35) .to(e[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) .to(d[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) // to right animation tl.addLabel("midpoint", .8), tl.add(function() { tl.stop() }, "midpoint"), tl.set(a[i], {left: -15}, "midpoint0.31"), tl.to([c[i], d[i], e[i]], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"), tl.to(a[i], .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"), tl.to(a[i], .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"), tl.stop(); //el.animation = t; el.data('someTimeline', t); //create the event handler el.addEventListener('mouseover', function(){ alert("trigger"); t.play(); }); el.addEventListener('mouseout', function(){ t.reverse(); }); } } destroy() { window.removeEventListener('mouseover'); } } new Button();

Great news gsap is moving to es6! I like treeshaking and keep everything as small as possible! However, what I don't understand is what the difference is between importing modules from 'gsap' vs. importing from 'gsap/all'. So far I was importing modules from 'gsap', but in the docs I read it's better to import from 'gsap/all' for treeshaking sakes. But when I look at the all.js file inside gsap it's importing the modules, like I would do myself when I import directly from 'gsap', because the project structure is build that way, it seems. Both ways work fine in having the same results onscreen, so I just looked at the output bundle size when I build the same project using imports from 'gsap', vs imports from 'gsap/all', and to my surprise there is a big difference in filesize: Importing from 'gsap': total project bundle here is 547kB Importing from 'gsap/all': total project bundle here is 612kB So importing from 'gsap/all' results in a 65kB larger bundle!! Btw, these import line's I'm using: import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/all'; // vs import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; I thought that would be the other way around, because 'gsap/all' was adviced in the doc. But with this result I'd say it's better to import from 'gsap'. @GreenSock Am I missing something here? What's the reason there is an extra option to import from 'gsap/all' instead of just 'gsap'? Thanks in advance!

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!

Hey there, i tried to set up a Codepen, but unfortunately i couldn't get it work ....i am basically using webpack and es6 promises as well as enqurie.js and scrollmagic with gsap to trigger different tweens/scenes and kill them when the breakpoint is changed, unfortunately i get a animation.tweenShowcaseDesktop.kill is not a function on a specific tween. Since i am not able to make it work in codepen here is the module where i trigger the tweens and scrollmagic : I know its a very long snippet and shot , but maybe someone will spot my mistake right away. thanks a lot guys and keep up the awesome work. animation.js import ScrollMagic from 'scrollmagic'; import 'animation.gsap'; import 'debug.addIndicators'; import TweenMax from 'TweenMax'; import 'EasePack'; // eslint-disable-line /* eslint-disable no-unused-vars, no-undef */ /** * ***************************************************************************** * Mobile */ export const controllerMobile = new ScrollMagic.Controller(); /** * Service Tiles Mobile */ export function triggerServiceMobile() { const serviceTileFigure = document.getElementsByClassName( 'js-service-tile__fig', ); for (let i = 0; i < serviceTileFigure.length; i += 1) { const sceneServiceMobile = new ScrollMagic.Scene({ triggerElement: serviceTileFigure[i], reverse: true, triggerHook: 1, offset: 0, duration: 280, }) .on('start', () => { serviceTileFigure[i].classList.add('js-service-tile__fig--is-active'); }) .on('end', () => { serviceTileFigure[i].classList.remove( 'js-service-tile__fig--is-active', ); }) // .addIndicators() .addTo(controllerMobile); } } /** * ***************************************************************************** * Desktop */ export const controllerDesktop = new ScrollMagic.Controller(); /** * Service Desktop */ export const tweenServiceDesktop = TweenMax.fromTo( '.c-service', 1, { autoAlpha: 0, scale: 1, y: 200 }, { ease: Power0.easeIn, autoAlpha: 1, scale: 1, y: 0 }, ); export function triggerServiceDesktop() { // const sections = document.getElementsByTagName('section'); const sceneServiceDesktop = new ScrollMagic.Scene({ triggerElement: '#trigger', reverse: false, triggerHook: 0.75, }) // .addIndicators() .setTween(tweenServiceDesktop) .addTo(controllerDesktop); } /** * Portfolio Desktop */ export const tweenShowcaseDesktop = TweenMax.staggerFromTo( '.c-showcase-item', 0.4, { autoAlpha: 0, scale: 0, y: 0 }, { ease: Power4.easeOut, autoAlpha: 1, scale: 1, y: 0 }, 0.3, ); export function triggerShowcaseDesktop() { const showcaseTiles = document.getElementsByClassName('c-showcase-item'); const sceneShowcaseDesktop = new ScrollMagic.Scene({ triggerElement: '.c-showcase', reverse: false, triggerHook: 0.5, }) // .addIndicators() .setTween(tweenShowcaseDesktop) .addTo(controllerDesktop); } and my entry where i import and trigger them: // Mobile Animationen enquire.register(breakpoint.forPhoneOnly, { match() { import('changeLogoColor') .then((changeLogoColor) => { changeLogoColor.default(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); import('animation') .then((animation) => { animation.triggerServiceMobile(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerMobile.destroy(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, }); // Desktop Animationen enquire.register(breakpoint.forTabletPortraitUp, { match() { import('animation') .then((animation) => { animation.triggerServiceDesktop(); animation.triggerShowcaseDesktop(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerDesktop.destroy(); animation.tweenShowcaseDesktop.kill(); animation.tweenServiceDesktop.kill(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, });

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

Just something to think about... The module issue is not going to go away until the source code is split up into actual modules. I've seen a lot of suggestions on GitHub, but I don't think any of them take into account the future. The JavaScript landscape changes too rapidly to depend on one type of technology. Just look at the decline of Grunt and Bower. Instead of creating modules for a specific loader (AMD, CommonJS, UMD, global), just create ES6 modules and let the user decide on the loader. This is the best way to design for future since it's going to be part of the language itself. To show how this would work, I split the TweenLite file up different modules including: Animation, SimpleTimeline, TweenPlugin, Easings, Ticker, and EventDispatcher. The only changes I really made were to the easings, to allow exporting eases individually because I didn't include the current GSAP way of defining classes. I also added an object called "gs" that get's passed around to the different modules as a work around to all the variables that get reused in the original file. So things like the ticker and rootTimeline instance are on that object. This was a quick proof of concept, and I really didn't do any testing so I might have missed something, but I am able to request GSAP modules in the browser using an ES6 module loader polyfill. This will also work with NodeJS. So now I can request stuff like this... (although I didn't actually do the CSSPlugin) // Get individual components import { TweenLite, CSSPlugin, Power4 } from "greensock"; TweenLite.to(myElement, 1, { x: 400, ease: Power4.easeInOut }); Of course this is only for users that want to use modules. For users that like using source files the traditional way, you could create a "dist" folder with these files already built, similar to current file structure of the src folder.

I'm able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment. I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so: /** * Import Libs */ import * as TweenMax from 'gsap'; /** * Exports for others scripts to use */ window.TweenMax = TweenMax; but when attempting to import the Draggable utility import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min'; I get the following error: Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module?