David12345

Thank you. These are great sources and I learned a lot from these. While checking these I also uncovered the source of error! It was unrelated to GSAP. It was a requestAnimationFrame that, upon useLayoutEffect callbacks got restarted every time, but the old one did not get cleared. This caused that by each run, the performance kept decreasing since the more and more running instances of requestAnimationFrame took the computing resources!

Right. It seems like that I'm adding more and more to the timeline. However, before actually starting the timeline I use .kill, .invalidate in order to clear it. Shouldn't that be enough to clear the timeline? Is there any other way to completely dismount the timeline on each run? I do not think the reverse is good for me, because the x position when I reverse is different than the original play x value. Or is there another way to set the x value for the reverse run differently?

https://codesandbox.io/s/lucid-leftpad-s12cb?file=/src/App.js This example is very similar in nature (how the animation is initialized and then reversed; not sure that it's a good practice though, how I do it with useLayoutEffect/useEffect - if you have some recommendations I'd appreciate it). However, getting to the point: I'm not able to reproduce the slowing down. Basically, what happens in my app is that with each play and reverse more and more frames are dropped leading to decreasing performance feeling.

Hi! I have a timeline that is executed when a boolean is set to true. It's not particularly heavy but it does change x, width, height for a given div. When the boolean is set to false, then another timeline runs that basically reverses the changes on the same div, but to another x coordinate, that's why I needed to create a new "returning" timeline. The boolean change is detected with useLayoutEffect. After each run the timelines start to become more and more laggy, dropping more and more frames when they are executed. I tried to optimize performance, like .kill before the timeline would run. I also tried .clear() but none of these things seem to help on the performance issue. Do you have any ideas why I might have this behavior? Thank you for your attention in advance.

Thank you this helped.

Hi Everyone, I have a timeline (React based app) where the translateX is set with set at the very beginning of the timeline with no transition, then the translateX position is animated. From time to time (every 5 occurrences when I hit refresh and replay the timeline) there is a quick flash/disappear/appear/jump in the translateX. This happens even if I set with .set, .quickSetter or .to with 0 transition. Does anyone have an idea why this might be happening?