search

wellcomecollection / wellcomecollection.org

🪟 Wellcome Collection's website and services that support it
https://wellcomecollection.org
MIT License
39 stars 5 forks source link

Remove toggle_viewTransitions #11282

Open davidpmccormick opened 1 month ago

davidpmccormick commented 1 month ago

What?

We have a toggle: 'Use view-transitions API' on the 'Temporary' section of the toggles page. This turns on functionality which uses the web platform View Transitions API to transition between exhibition guide overview pages and individual stops, as well as between stops (using prev/next) links.

This should work on several desktop browsers, as well as Android, and iOS (starting in the latest version – 18).

We need to decide if we'd like to keep this functionality, and if so, move it out from behind the toggle.

@dana-saur @kasiabbb please could you turn the toggle on at the page above, and test the exhibition guide journeys to see if you think we want to use this or remove it. There might also be some scope for finessing transitions, but they don't (currently) offer a great deal of control (just what is possible with css animations).

Why?

Potentially nicer UX.

Background

Done when

kasiabbb commented 1 month ago

I'm getting this effect on Chrome, for a split second after swiping the previous stop's picture is visible instead of the following stop. I suppose it's a little disorientating, is that something that could be fixed easily or not so much?..

Also, my gut feeling is that the animations look very fast on large breakpoint, especially after watching them back.

https://github.com/user-attachments/assets/369b1ee4-5e99-4e72-9622-6423647e19ba

It did not work on up-to-date Safari or Firefox for me.

Updating iOS to the version 18 to check there

davidpmccormick commented 1 month ago

We can slow down the transitions. Also, they currently have an ease-in easing, but I think ease-out or even ease-in-out would probably be preferable. They currently run for 200ms – should we try 300ms with the different easing? This might be something that's better tested in person when we're in the office.

As for the image loading, I agree it's clunky. I had a couple of ideas to try, neither of which seem to have improved it.

Mac and iOS Safari 18 should work (confirmed here). But they're not supported in Firefox.

kasiabbb commented 1 month ago

Shame the image loading is proving tricky but yes, let's try the slower settings with ease-in-out and see :)