pier

Thanks for your input. I have used Pixi.js in a few projects and it's awesome. Specially for people with Flash AS3 experience. Although losing CSS and DOM can be very limiting for some cases. To be fair I don't have that much experience with Angular, but in React showing and hiding DOM elements is done modifying component state. Then at some point React will remove the DOM element since setState is async. Since you don't really have direct control of the DOM those hand crafted sequenced animations and micro DOM management becomes very tedious. If anything good comes out of my ES6 classes experiment I'll see if I share it.

So a little introduction first. I've been using GSAP probably since 2006 or so when AS3 was introduced. I've done tons of interactive stuff in Flash and Adobe Air. Of course, AS3 is pretty much dead these days, and HTML5/ES6/CSS3 is the thing now. A few years back I used jQuery (like pretty much anyone) along GSAP for doing interactive oriented websites. Not so much data oriented web apps. This provided a very flexible coding experience, although ES6 wasn't here yet and it was prone to messy projects. These days, React, Angular, Vue, etc, are all the rage, but those are focused to develop data driven web apps with data binding magic. But since DOM management is delegated to those libraries / frameworks, I've found that coding sophisticated interactive experiences is a pita. Such types of websites usually require micro DOM management entangled with sequenced animations, etc. Right now I'm testing a very simple component based system with ES6 classes that combines GSAP and jQuery for DOM manipulation, and see how that goes... So what is your approach? What libraries do you use for GSAP heavy projects?

Hey Jack Do I need to import CSSPlugin on every ES6 class I want to use TweenLite or is it enough to import it in my index.js?

I've used GSAP with Pixi in the past. No problems and the idea is the same than with Paper.js. GSAP can tween values in any JS object so you can either tween an intermediary object and then read those value with onFrame() in Paper.js, or directly tween the values of Paper.js objects.

I'm using Webpack with Babel and ES6. So how would I just import TweenLite and just CSS plugin? In the NPM description it says that everything is included in the package, but I don't want to bloat my project since I don't need 90% of what's included in the package. Edit: I've tried the usual syntax and it doesn't work. import { TweenLite, CSSPlugin } from 'gsap'; console.log(TweenLite) // undefined

Hi everyone I'm starting to work on a GSAP snippets package for the code editor Atom. It's still very basic, but it covers bread and butter JS code for GSAP. You can get it right from inside Atom in the preferences section. Here is the Atom.io package page. https://atom.io/packages/gsap-snippets And the Github repo where I'll be updating the latest version https://github.com/PierBover/gsap-snippets Cheers

Thanks! I figured it out seconds before you posted. Utils.detachTarget = function () { this.target.detach(); }

I have never written a plugin for GSAP, and I haven't found a tutorial to do it either. I'd like to write a plugin to detach a target from the DOM with jQuery once the onComplete fires. How would I go about doing this? As a fast and dirty solution... could I access the the animated target from a callback of onComplete?

I would, but the project is a bit complicated at this point. Do you have any idea of what could be causing the stuttering?

I'm using GSAP along Pixi.js and getting some random stuttering. At first I thought it was a rendering performance problem, but after enabling Chrome FPS I saw it stayed at constant 60 fps. So I changed from GSAP to Tween.JS and the stuttering completely vanished. I was puzzled, I have been using GSAP for years (since the Flash days) and never encountered such thing. This got me thinking. Tween.JS tweens an internal JS object, and then you update your own object inside an onUpdate method. So I applied this same idea with GSAP and the stuttering vanished. var positionTweenProxy = { x: Grid.layerThumbs.x, y: Grid.layerThumbs.y }; TweenLite.to(positionTweenProxy,2,{ x:posX, y:posY, onUpdate: function () { Grid.layerThumbs.x = positionTweenProxy.x; Grid.layerThumbs.y = positionTweenProxy.y; } }); Is it possible that the stuttering is caused by tweenning the properties of a large JS object?

So lets say I tween opacity to 0, and before the tween ends I make a new call to Tweenlite.to to opacity 0 on the same object. Does Tweenlite ignore the second tween? Does it start again from the current opacity value and "resets" the easing curve?

Have I been living in a cave? Thanks guys!

When I have a list of elements I always do a for loop, tween each element, and add something along these lines to get incremental animations. TweenLite.from($('.something'),.5,{opacity:0,delay: i * 0.1}); But is there a GSAP way of accomplishing this when selectors match multiple HTML elements? TweenLite.to($('div'),.5,{opacity:0,autoIncrementDelay:0.1}); Like a magical self incrementing delay property? I've been using GSAP for years (since 2007 I think) and this is the first time I have wondered if this is even possible.

Thanks Carl, I've had problems in the past with .from() and delayed calls so I usually avoid it, but in this case it should work.

I'm coding an accordion and I'd like to tween the height of a submenu so that it grows from 0px to whatever is it's natural height. I've found that GSAP doesn't tween values between 0 and 100% or auto. Apart from having a variable record the final size and pass that to the tween, is there a more GSAP oriented way of solving this? TIA

Hi greensockers! So I have a display object 3d with a bunch of cubes in it. On the enter frame event, where the render goes, I do this: myDo3d.rotationY += 0.1; It works well until I use a simple alpha tween on a menu button. The rotation slows down, and when the tween finishes it goes faster trying to keep up... Also the tween become less responsive when the do3d is rotating. It's not a cpu problem because at all times it's below 30%. I still haven't treid tweener because I'm hard core GS fan and that would feel like a betrayal..... Any ideas? Thanks!