Leaderboard

I think the biggest issue is just that you're starting with something that fills the screen and scaling that 4x and animating it down. So let's say your screen is 1,000 by 1,000 - that means the browser is having to calculate 16,000,000 pixels initially, and gradually get down to 1,000,000. So even though you're scaling by 4, it's actually 16 times as many pixels. That's a lot of pixels! You could try setting will-change: transform in your CSS for the animating element, but be careful: https://greensock.com/will-change You could also make things more efficient by using a single tween instance and just reusing it (play() it to open, reverse() to close) and force it to render initially (before any clicks so that the start/end values are pre-recorded) like: But again, I think the biggest issue here is the amount of stress on the browser to do graphics rendering. Canvas would probably perform faster. For example, you could use PixiJS. But I realize that means rebuilding a lot which may not be fun. I wish there was a silver bullet that GSAP had that could magically save the browser from its graphics rendering load.

I didn't see huge problems in Firefox, but I'm curious: Why did you set the CSS to translateX(100%) initially? Does it work better to just set visibility:hidden? Does it help if you set force3D:true in your tween(s)? Keep in mind that you've got a VERY big SVG that you're asking the browser to re-render on every tick. Basically every pixel in the viewport is changing and that's a big task for the browser (unrelated to GSAP). If it's a graphics rendering issue, perhaps try swapping out the SVG artwork for a JPG/GIF/PNG just to see if it's better. You could always consider using that during the animation, and then onComplete swap in the SVG if you're looking for resolution independence. But again, none of that has anything to do with GSAP. I'd bet that GSAP's load on the processor is well under 1% of the overall load. Graphics rendering is more CPU-intensive BY FAR, especially with SVG.

Welcome to the GreenSock forums! Thanks for the demo. The trick here is to invert the scaleX value on each repeat: var scale = 1; function flip(){ TweenLite.set('.cat-chased', { scaleX: scale *= -1 }) } Your flip() function wasn't being called because it was set to onComplete. Your tween that moved the cat horizontally was set to repeat infinitely (repeat:-1) so technically it would never complete. onRepeat fires after each iteration of the tween is done.

Thanks for the demo. It appears to me that the tweens are running as soon as the page loads. I made a slight change to make the tweens slower and added scaling: If you look at the pen in a larger browser window you will see that any element in the viewport animates in on page load... most likely due to the fact that it is above its respective trigger. I think with the opacity and slight y changes, it was just hard to tell it was happening on page load. It looks to me that things are working as they should. I don't really use ScrollMagic and its not one of GreenSock's products, so please keep in mind there is very little we can do to actually support it. Unfortunately it looks like the project has been abandoned for a few years now, but for more ScrollMagic help it might be worth filing an issue here: https://github.com/janpaepke/ScrollMagic/issues

@GreenSock okay thank you very much for the perfect answer! now I understand the problem better

Here's a rough concept with just the GreenSock logo: You could easily apply the same concept to an image that's sitting on top of another image to create that gradated transition that moves with the mouse. As a performance consideration, I just create a single tween that moves the mask from left to right, and then tween that tween's progress value according to how far the mouse is across the whole image. So if it's in the middle, the progress would be 0.5, for example. Hope that helps!

Ok, for now i implemented option 3 and only mark the several 'ui' tweens with a data property, works very smooth. I might refactor my code to option 2 which seems a bit cleaner to me. Before dropping my questio nheere this was the approach I took, but not aware of the 'smoothChildTiming' which is crucial to prevent stange behaviour. Thnx again!

Really helpfull! I was already at this exact moment working with the getAllTweens method and segregating the tweens by targets with the game property, but the data approach is cleaner. Thnx! I'll provide feedback after solving mu use-case.

Welcome to the forums! Several approaches come to mind... 1) Simply use getTweensOf() to get the animations you need. I imagine you know the targets of the tweens that you need, so just feed those in... var animations = TweenLite.getTweensOf([obj1, obj2, obj3]); //now you can do whatever you want with those - pause() them, timeScale(), or whatever. 2) Populate a discrete timeline instance var game = new TimelineLite({smoothChildTiming:true}); var ui = new TimelineLite({smoothChildTiming:true}); //now just tween accordingly, and if you want things to start "now", use rawTime()... game.to(obj, 1, {...}, game.rawTime()); ui.to(obj2, 1, {...}, ui.rawTime()); If you feel like the code is getting redundant or long-winded, you could even write some functions to make it more concise... var gameTL = new TimelineLite({smoothChildTiming:true}), game = { to: function(target, duration, vars) { return gameTL.to(target, duration, vars, gameTL.rawTime()); }, from: function(target, duration, vars) { return gameTL.from(target, duration, vars, gameTL.rawTime()); }, fromTo: function(target, duration, fromVars, toVars) { return gameTL.fromTo(target, duration, fromVars, toVars, gameTL.rawTime()); } }, uiTL = new TimelineLite({smoothChildTiming:true}), ui = { to: function(target, duration, vars) { return uiTL.to(target, duration, vars, uiTL.rawTime()); }, from: function(target, duration, vars) { return uiTL.from(target, duration, vars, uiTL.rawTime()); }, fromTo: function(target, duration, fromVars, toVars) { return uiTL.fromTo(target, duration, fromVars, toVars, uiTL.rawTime()); } }; //now you can just write animations using "game" or "ui" instead of TweenLite or TweenMax: game.to(...); game.from(...); ui.to(...); ui.from(...); ... Then, just control them independently like game.pause() or ui.pause(). 3) Use the "data" property to segregate things You can flag any tween using the data property like: TweenMax.to(... {data:"game"}); TweenMax.to(... {data:"ui"}); //now get them and do whatever you want with them: var gameTweens = getByData("game"); function getByData(data) { var animations = TweenMax.getAllTweens(), i = animations.length, results = []; while (--i > -1) { if (animations[i].vars.data === data) { results.push(animations[i]); } } return results; } Does that help? There are probably even more ways to do this, but hopefully this gets you going in the right direction