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

Thanks for filing the issue @bakura10. While you're experimenting with the cross-document version I could see this happening with the same-document (SPA) version of the API too.

Let me reiterate to make sure I understand what you're trying to do. You have an IntersectionObserver setup for all items on the new page to do a staggered fade-in/translate animation. The IO is mean to trigger the animation when a new item is scrolled into the visible viewport.

When you add the ViewTransition, the IntersectionObserver fires before the first frame of the new page (which also starts the ViewTransition). So now the ViewTransition animation and the translate/fade-in animation on each item are running in parallel.

You can do a couple of things based on the UX you want and what's easier to integrate with your code:

- If you want to keep using the on-scroll animations to take care of fading in the items on first load, then you can defer registering the IntersectionObserver until the transition animations are done. The MPA API doesn't have it right now but we'll have a promise for this similar to SPA's [finished](https://drafts.csswg.org/css-view-transitions-1/#viewtransition-finished-promise) promise.
   This way the IO events will fire after the transition is done and you can chain any animation which should happen then.

- You could define all animations for the transition using the VT API and only use the on-scroll ones for interactions after page load.

@jakearchibald for a suggestion too.


-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8269#issuecomment-1372665681 using your GitHub account


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

Received on Thursday, 5 January 2023 19:55:02 UTC