Fakebook

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}) ;

Great, this looks perfect @Sahil - out of curiosity... do to tweens perform better than from tweens?

Ah, thanks @Sahil - I'm a fan of that bounce effect since it goes past the preset y value compared to the bounce easing. Is there any solutions to smoothinig that out, or would it be best to use a fromTo and some other tweens to simulate the effect?

Thanks, @Sahil - not sure how I missed the display: inline-block property, but that seems to do the trick. When taking advantage of translate via x and y, I noticed a similar issue to what I posted in this thread. I went ahead and applied a similar fix which was recommended there. In this test, things don't look too different, but it's good to hear in more complicated animations there are definite advantages. force3D: false Also, I think creating in canvas is what I'm going to be looking at very soon. It seems that GSAP + PixiJS is the obvious choice for performant tweening. Are there any other recommendations on GSAP + canvas? Updated pen:

I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making. In the example pen, I have a few questions. 1. Does using x, y improve the animations over using top, bottom, left, right? In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on the letters. 2. How would you use x and y translates with staggerFrom + letters wrapped in spans? I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work. 3. Will lowering the ticker's call time help with performance? While Tweens may not be as smooth, will the browser use less resources if set to something like: TweenLite.ticker.fps(30);

I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated. If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text. I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?

I've been trying to animate an image that I set up in canvas with Easel JS, and have no success. I was curious if anyone had advice on how to do this? Also, I am under the impression that animating in canvas will give me a significant performance increase, as opposed to inside the DOM. I was curious if there was a good resource I could be pointed to, to help me better understand GSAP + canvas.

I created a simple example of what I've been working on. Basically, I want to do the following with multiple timelines. In my example, only one box should be moving at a time. Currently, multiple will play at the same time. So, red box moves and stops, then green box moves and stops, then blue box moves and stops, then finally red box moves again and then stops. It is also important that I use functions, because in my working project example I am taking advantage of certain callback functions. var tl = new TimelineMax({ repeat: -1 }), tl2 = new TimelineMax(), tl3 = new TimelineMax(); tl.to("#one", 1, { left: 300 }); tl.add(tl2); tl.add(tl3); tl.to("#one", 1, { left: 60 }); function timeline2() { tl2.to("#two", 1, { left: 400 }); } function timeline3() { tl3.to("#three", 1, { left: 300 }); } timeline2(); timeline3();

Thanks Diaco. Your idea works, but I was hoping there would be a way to do this without callbacks within plugins. I wasn't sure if there was something within GSAP or maybe a smarter way to do this with jQuery or JS.

I'm having a bit of trouble animating elements that are loaded through JavaScript. Specifically, I was using Jason Mayes Twitter Post Fetcher to load tweets into my page. However, when I try to animate the username, tweets, or any other elements that it loads, I am unable to. I am sure my timeline and tweens are working properly, because when I add in static elements, they target the proper elements. Is there anyway to target elements loaded via JS?

I'm fairly new to GSAP, so I'm struggling with how to complete a certain task. I'm trying to do the following: Complete the animations for the first box > Pause for 2s > Fade out elements > complete animations for second box > Pause for 2 > Fade out >.... after all boxes do their animation separately, I would like to have another delay before the entire process repeats itself. I wasn't sure if using methods like StaggerFromTo or Each would help / how to implement with GSAP. Any info on where to start would be greatly appreciated.