Fakebook

Exactly! And this actually makes perfect sense now, thanks!

I was curious if I could get pointed in the right direction as how to remove an element at the end of a tween. I imagine a callback or something along that line would be best, but I'm not too familiar with it. In my example I'd want to use an onComplete to remove the divs, but hopefully do so in a way that's a bit more dynamic, in case I'm dealing with a lot of different elements.

Each is great, but having amount is actually insanely useful and solved a problem I was working through with dynamic content... can't wait for GSAP 3.0

Perfect, makes sense and helps! It looks like I was getting confused with amount as well, I was assuming it was the total time of the tweens + the stagger, and not the amount of time for just the staggers to happen. Your example or below works perfectly - thanks! .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: { from: "left", amount: 2 }}, null, "-=4")

While the video about Advanced Staggers was really helpful, I got left with two main questions afterwards. First, how to play the stagger earlier in the animation. In the pen example I'd want it to play 1 second after the previous tween, so I used , "-=4" - however, I'm lead to some confusion with using amount now, since I don't have to specify the the duration between each staggered animation. Previously I would've put something like: .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOu}, 0.4, "-=4") I'm wondering if something if the correct sort of syntax would be: .staggerFrom(".block", 0.8, {opacity:0, y:"50%", ease: Power1.easeOut, stagger: { from: "left", amount: 2 }}, 0.4, "-=4") However, having the additional 0.4 when using the amount: 2 for the timing is a bit confusing. Perhaps setting the 0.4 to null is the correct way? Finally, when using amount, should I be doing a similar approach with the timing each ease. In my example it's 0.8, should this be set to null as well?

Thanks! Can confirm that the font-kerning: none; seems to do the trick. Edit: just wanted to mention it works when applied to the parent element (the element being split).

I've noticed that text, when split, will sometimes have wider letter spacing. This seems to happen only when using the type: chars . This is especially noticeable when the split is applied right before or during an animation. Image example (Imgur). In my pen you can see a few differences. I was wondering if there's any way to reduce, or effectively eliminate, this issue. I tried a bit of CSS, but with no success.

@Visual-Q This is definitely a great idea, but it appears that using stepped easing doesn't effect the onUpdate rate. I'm guessing it might be best to throttle inside my function as @elegantseagulls mentioned.

I was curious if can set the rate that a specific tween fires onUpdate. Basically, I want to simulate a lower frame rate for a tween that is using onUpdate. I've seen that the TweenLite.ticker.fps(10) could work, but this seems to control the rate at all the tweens, and not just one specific tween. TweenMax.to("#lowFps", 3, { onUpdate: () => animate() }) In my Codepen example, I was hoping to have the top Tween smooth, and bottom one look like it's low fps. However, changing the ticker of course effects both.

Wow, this article is amazing, wish I found it earlier. I used the method from this video, Revolutionize your animation workflow: Part 2, and used a function to create a new timeline for each event.

Great, will definitely check this out - could you give me any reference for garbage collection/how to clear completed timelines?

I'm curious what the best way is to tackle a project that has multiple (some time 5 to 10 at once) animations that use a complex set of tweens, but tween independent of each other. When the new elements are created/appended I originally tried to use TweenMax without a timeline on the new elements. This of course has its downfalls as it's difficult to create and if something changes, changing all the delays/timings can be a nightmare. I was thinking of creating a new timeline each event, but if a user uses the page for a while, there could be hundreds and even thousands of timelines created. In my example: If you click the button multiple times, I'm currently just adding to a timeline, where the events are waiting for the others to complete before they play. What do you think is the best way to handle a situation like this, while still taking advantage of the timeline? Should I create multiple timelines or something else? Will having a lot of different timelines be a big page performance hit over time?

I think I know what you mean. Not sure how to do this off the top of my head but will look into it. Basically the script is loaded, but not executed?

I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js') .then(function() { var tl = new TimelineMax({repeat: -1}); tl.to("#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.

I'm curious how I can create a delay that is not affected by the timeScale property. For instance, I'd like a variable that changes the overall speed of each animation, but not the amount of time that it pauses for. In my example, the timeSpeed constant could go from .5 to 3. Is there an easy way to tell timeScale to ignore delays? const timeSpeed = .5; const pauseTime = 1; const tl = new TimelineMax({repeat: -1}); tl.timeScale( timeSpeed ); tl.to("div", .5, {x: "+=100", y: "+=100"}) .to("div", .5, {x: "-=200", delay: pauseTime}) .to("div", .5, {x: "+=100", y: "-=100", delay: pauseTime}) .to("div", 0, {delay: pauseTime}) ;