Tahir Ahmed

Great feedback @GreenSock. I think this feedback and this thread may become my favourite one to point to the next time I am having a debate on this topic with anyone; along-with the why-gsap and kilobyte-conundrum links of course. This thread has addressed a number of great points from all of you. Thanks everyone. And massive thanks, again, for this really important tool that you introduced years ago, that you have put so much effort into it over the years and still are continuously doing so. Two thumbs up.

I think you are looking for an overlapping animation if I understand it correctly. I think you can achieve this in a number of ways but here is what I would propose with slight modifications to your animations timing and the properties that are actually animating but most importantly, utilising position parameter and nested timelines: var mainTimeline = new TimelineMax(); $('.animated').each(function(index){ var tl = new TimelineMax(); tl.from($(this).find('.image'), 0.6, { alpha: 0, y: -20, ease: Power2.easeOut }, 0); tl.from($(this).find('.title'), 0.6, { alpha: 0, y: 10, ease: Power2.easeOut }, 0.2); mainTimeline.add(tl, '-=0.6'); }); $("#play").click(function() { mainTimeline.restart(); }); To understand more about this position parameter in the world of GSAP, I strongly recommend you to take a look at this in-depth article explaining all the different ways you can use it: https://greensock.com/position-parameter. Hope this helps.

If I am not wrong, this is possible using _gsTransform object that GSAP adds to any target object. Take a look at this as an example.

I could be wrong but don't you think that your second `[].forEach()` call should have `.js-button` as its target elements rather than the same `.jq-button`? Does that help?

And of course, you can go really crazy with these ideas Here is an update to the same: jsFiddle. P.S. I wouldn't exactly recommend the approach though as these are all `div` elements so your browser won't really appreciate it If you really are interested in these kind-of "particle" effects, I recommend going down the canvas route. Pixi.JS is pretty amazing at that. You can use it with GSAP of course

Here is a demo using the technique @Jack described: jsFiddle.

Understand about the image dimensions. I am curious though if it did improve any rendering for you, i.e. a solution using an overlaying element of top of an image to reveal it by animating `translateY` over anything else, even if you are unable to utilize it. And sure, do share what you have and I can help as much as I can. Re `yPercent`, I recommend reading the blog about the release of 1.13.1 version of GSAP. This feature has been available for a while now.

Don't really notice much difference here on my Macbook but my guess is the browser is having a hard time render a very large image (5615x2907 pixels) or it could be that you are animating `height` that is causing problems. If animating `height` (which, in many cases, could produce janky animations) is the cause, here is a forked version with a few amendments for you to try out. As I said, I didn't notice any difference for me in the first place so I can't really tell if this forked version will do any good, but give it a try and let me know how it goes.

Hi @jesper.landberg, Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari? As for the questions, here are the answers, based on the little understanding I have about the system: I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link. Search for `force3D` in these forums and you should find plenty of posts regarding it. Hope this helps in some way.

I think this is happening because there are a number of differences between the logo animation this website has and the codepen version @ThePixelPixie is having, mainly: The number of `companies` elements in the website is 5 but the codepen version @ThePixelPixie has is 4. The number of `company` elements in each of the `companies` elements in website is 15 but in codepen it is only 2 (and in one case, 3). The code in JS is mainly catering for the numbers of `companies` (and `company` element in each of those `companies`) elements and is tightly bound to that. Just to try it out, make duplicates of `company` element inside `companies` element to have them exactly 15. And also make sure that the number of `companies` elements is exactly 5 by duplicating as well. This should make the code work fine. However, to make it flexible / scalable and adopt to your needs (i.e. 4 `companies` elements and perhaps 2 `company` element in each of those), there is some work that needs to be done in the code. Here is forked version of the pen with these updates. Also, you don't need to include TweenMax via <script> tag if you are already loading it via the Settings of codepen along-side jQuery. Hope this helps in some way.

Now that I think about it, @Jack's solution works the best and this situation was a perfect fit for `stagger` methods as he described. I missed that by a mile, how could I do that didn't even cross my mind .

Should be easier to achieve, here is your resulting fiddle. JS: var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle'); var duration = 1; var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0); var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6); var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2); function createTimeline(target, duration, delay) { var timeline = new TimelineMax({ repeat: -1, delay: delay }); timeline.fromTo(target, duration, { opacity: 0 }, { bezier: { values: [{ opacity: 1 }, { opacity: 0 }]}, ease: Power1.easeIn }, 0); timeline.to(target, duration, { y: 21, ease: Power1.easeIn }, 0); return timeline; } Hope this helps. Not very sure if I understand your second question i.e. separate functions for `opacity` and `translateY`. Can you elaborate more on that please?

Hi Carl, Thanks a lot for the nice words. I am still learning And thanks a lot for the detailed explanation as well. In fact, I currently use the same technique whenever I have to deal with such situations i.e. create a timeline without delays and another layer of management on top of it all to handle the _pauses_ and yes, usually it means using the `.delayedCall()` method. I can see the reason why this would be just too impractical to bake something like this in the core and thus not worth the effort. Performance (file-size and computations) being the top reason. Far too many scenarios to handle. Consider this chapter closed. For now at least. Thanks a lot again

Hey @OSUBlake, cannot speak for @ald603 but I am, in general, interested in an idea of skipping `delay` and overall gaps put in a timeline using `position` parameter (e.g. intentionally creating gaps using the `+=` operator in `position`) by having some kind of a fast-forward control over a timeline. I am pretty sure it doesn't exist in GSAP system yet but I can see the benefits of having such a feature, this problem here by @ald603 is a prime example of such a use-case.

I could be wrong but I think you don't need the parts with this `clicked` variable. Not entirely sure why you have them there in the first place but these are the parts enforcing you to click twice in order run the animation so I think the final code should look like: var buttonOne = $('#one'); buttonOne.click(function() { tl1.tweenTo('first', { onComplete: function() { this.timeScale(1); } }).timeScale('7'); }); Hope this helps. P.S. I am also curious in knowing the answer to the 2nd question you posted above i.e. a way to skip pauses defined in a timeline. There are a number of situations where I could see this being useful, your situation is a prime example of it. Perhaps someone here can answer this, I would like to know as well.