Trig-JS
Trig-JS copied to clipboard
iDev-Games
iOS animation issue
If you try to scroll your documentation in Safari iOS you will see the glitch with scroll-based animations.
The reason is that transition in Safari starts anew each time CSS variable obtains a new value. Chrome, to the contrary, continues transition from the previous position.
I am not sure what would be a possible workaround for that. Maybe something with animation-delay technique from css-tricks the article?
Hi,
Thanks for sharing this. I don't think this is an issue in safari only, I just don't think the issue is as obvious in the docs as the animation is in the middle of the element.
Same issue and fix explained here:
https://github.com/iDev-Games/Trig-JS/issues/7#issuecomment-2934522903
I need to revise the trig-animation.css as this was the first version of the CSS.
Thanks
We don't use trig-animation.css, we use only trig.js with tailwindcss counterpart. The issue comes (as it seems) because of degraded performance of scroll event in mobiles, which is throttled with 4-5fps. We don't see that issue with 6x throttled CPU in chrome, since transition is properly interpolated and do not reset its state.
https://github.com/user-attachments/assets/c09271e7-8bcd-4acb-92cc-28b8d39a1e1d
I think one possible solution would be waiting for "transitionend" event before changing --trig css variable to the new value. The other would be - before changing --trig CSS variable force-set animated value to intermediate value before changing.
It looks to me like it is extremely throttled like you say but what actually causes it to be jittery is the fact that transition isn't working it seems. The position updating of the css shouldn't cause it to be jittery due to transition.
Transition is working, but each time new position is set via css variable, it resets the transition and starts anew.
If it's resetting transition then transition is not working. The transition smooths out the movement between the change in attributes over a period of time, which this is not. There's no reason the position setting would change this. Unless safari resets css if a style is changed, such as a css variable. It might be worth updating safari if you're not running the latest version.
Not that I am trying to fix it on my phone, we have a list of versions to support... Yes it seems browser specifics
It might be worth doing some tests to see. Maybe a simple javascript delay and then changing the var to see how it acts. I would test this but I have no way to test it unfortunately.