Is there any way to make the styling animations synchronised across each component that uses them?
And if not possible without custom css now, is this a feasible idea request to add an option to a style class for the animation to be synchronous for all?
I don’t think it’s feasible now with CSS only… That said, it’s absolutely a feasible feature request!
It would be crazy difficult because it’s all based on asynchronous property updates. You could probably get something CLOSE to synchronization by relying on a Timer script to broadcast a toggle between two styles.
Has any progress been made in this topic so that animated styles with the same duration animate synchronously?
I managed to sync my animations using the JS injection trick. I don’t think there are any other ways of doing this for the moment.
Mixing the JS injection trick with the getAnimations() function to get all your animations and resetting their startTime to 0 should get you pretty close.
Also, make sure to use a setInterval to ensure new animations being synced.
Depending on the amount of animations currently going on, this may slow your client down though, so if your pages have like 1000’s of animations, this might not be the way to do it.
I usually hide the markdown in a docked view that is always visible to make sure all my pages benefit from the animation sync.