[csswg-drafts] [css-view-transitions-1] How to interact with Intersection Observer? (#8269)

bakura10 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] How to interact with Intersection Observer? ==
Hi,

I am trying to play with the new view transitions API in the context of a multi page website. For now, I am using the meta tag to perform the cross-document transition.

I am however facing an issue that I am not sure if this API is supposed to tackle. We have some on-scroll based animations that are powered by an IntersectionObserver, for instance to stagger items. However, the issue seems that the observer is fired as soon as the page transition _before_ the page transition has actually finished. This can lead to a situation (if the page transition is the same or slower than the animation) where the on scroll transitions are completely ignored.

To illustrate the situation, here is how it looks without any page transition:


https://user-images.githubusercontent.com/1198915/210054932-485d9d4e-1308-4eed-85f8-16832998c3fa.mov

And how it looks with the page transition enabled (slow down to 5s to exhibit the issue). Because the IntersectionObserver runs immediately and fire the animation on each blog post card, when the view transition API replaces the old by new, the animation is already completely finished.


https://user-images.githubusercontent.com/1198915/210055072-05907643-e69d-40f5-8ad7-6c1708113310.mov

Am I trying to use this API in an unintended way here?

Thanks :)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8269 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 30 December 2022 09:28:43 UTC