badtant

With some googling I ended up on an article about the css property will-change. If I set will-change: transform; to .box the issue seems to go away. You can also set will-change: opacity; or both will-change: transform, opacity; I added an opacity/autoAlpha animation to my box but will-change didn't seem to solve that one. Anyone used this before? https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

I tried that and yes, the problem still occurs. I also tried with a css only animation and when doing that the problem disappears. So I'm guessing this has something to do with repaints caused by setting transforms with inline style? And yes, then it's probably not specific to gsap but to animations done that way. Any pointers in any direction how to tackle this is appreciated. I want to keep doing the animation with gsap Below is the css only animation that didn't have the problem. @keyframes test { from { transform: translateX(0); } to { transform: translateX(100px); } } .box { width: 100px; height: 100px; background: red; animation-name: test; animation-duration: 0.5s; animation-iteration-count: infinite; }

Hi! I'm not sure if this is a gsap issue or not but hopefully someone here has insights. So, I have a 100% height container that contains my content and scrolls. It also has -webkit-overflow-scrolling: touch set to get smooth scroll on iOS. In the container I have a gsap animation that runs with an interval (yes, I could use loop but my real case contains random numbers for each time it runs). To reproduce the issue (on an iOS device or simulator): 1. Scroll the container to one end so that you get the iOS "bounce" thing and hold it there 2. When an animation starts, the bounce is "released" and I don't want that Here is a JSFiddle: https://jsfiddle.net/oxeys91u/41/ You can view it (on an iOS device or simulator) here: https://jsfiddle.net/oxeys91u/41/show I've also attached a little movie showing the issue. ios-bounce.mov

Thanks for the help! Wasn't sure if it was related to gsap or react I solved it with a ref like described here: https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks

Hi, So I have a counter as a react state. It increments with the "add" button. When the animation completes after 5 seconds i want to console.log the current counter state. The problem is that it's always 0 even if I can see that the counter updates. https://jsfiddle.net/Lm1jzfpe/18/ What am I doing wrong here?