Loque

Yeah same for me, the SVG version runs like crap

Here you go, my rotation test with rotation: 10 https://codepen.io/LuBre/pen/YzPGLrp It's even worse now (more noticeable) on Firefox. I'm on PC/Windows 10 with the latest Firefox version installed today on this machine (71.0). I've also enabled hardware acceleration in the Firefox console but nothing changed. Edge works fine though. Testing it on my office PC (via AnyDesk) I see the same issue: Firefox stutters, Chrome/Edge are butter-smooth.

Weird, even skewing or rotating the element I don't see any change in Firefox. It works with Edge though. Thanks for the feedback, I'll us it as the official answer if a client asks me about Firefox

Hi! Sorry I was on the go and didn't spend the proper time to support my comment. I've coded a fast Pen for you to replicate the performance issue. I've made 2 versions: one with GSAP, one with CSS animations only. https://codepen.io/LuBre/pen/yLyapGW Chrome = butter-smooth Firefox = little stutters Edge = little stutters unless you add "rotation: 0.01" option in tl1 And here's the same-exact animation without GSAP (css animations only). It doesn't run as butter-smooth as GSAP but it runs perfectly fine across all browsers (link removed to avoid double-codepen issues here on the forum). codepen.io/LuBre/pen/GRgjyEm What do you think about this stuff? Let's dig into it, I love GSAP and I want to explore all the possible avenues ### EDIT ### I've reduced the code to the most simple thing ever. No images, no fading, just the text translation. It still doesn't run smooth on Firefox/IE: codepen.io/LuBre/pen/PowGQby

I know it's been more than 2 years but I've found this issue with Firefox AND Edge so I gave it a try. Adding the rotation: 0.01 trick made Edge silk smooth (great!) but nothing changed when using Firefox (I manually enabled the hardware rendering via config: already). Any new tricks for 2020? :-D

Hi! I would like to optimize the code you can see in the posted Pen. I basically have 5 elements that appear one after another and I use 5 different timelines to do the job. I could use a single timeline but they would appear one after another, right? Instead... I want each one to appear while the previous element is still appearing (to make it a bit more fluid). That's why I added a 0.3s delay that gets increased to 0.3 > 0.6 > 0.9 > ... So this IS NOT what I want https://codepen.io/LuBre/pen/jOOvbdY And this IS what I want ... But with better code: https://codepen.io/LuBre/pen/YzzOyEm I am sure I didn't choose the best way to do so. What would you suggest?