View transitions in the real world by Elly Loel

Presenter view

Slide controls
0

  1. 0

    Hi, I’m Elly Loel, my pronouns are she/her.
    Quick self description for any blind or low vision people: I’m a tall white trans woman with blonde hair.
    Like Miriam mentioned earlier, I was also going to have my outfit match my slides but unfortunately spilling egg yolk on my outfit means that isn't happening.

  2. 1

    So today I'm going to be talking about view transitions.
    We're going to explore the technical implementation of both same-document and cross-document view transitions, through real world examples.
    We’re also going to focus on best practices for ensuring accessibility, enhancing usability, and improving the overall experience.

  3. 1.1

  4. 1.2

  5. 1.3

  6. 1.4

  7. 2

    Why should you use view transitions?
    Why should you care about view transitions?

  8. 2.1

    Because of your users! You want them to have a good experience.

  9. 2.1.1

    Animations are inherently engaging. Seamless transitions make users feel like the app cares about their experience, fostering a sense of polish and satisfaction.
    Non-technical stakeholders love it: The visual impact resonates strongly as it's something they can point to, it's hard to miss compared to other technical things.

  10. 2.1.2

    Smooth transitions help to make new content from a page navigation or state change more obvious. Instead of static "jumps" or flashes, transitions guide users visually, making apps feel more performant and intuitive—even if the underlying speed hasn’t changed.

  11. 2.1.3

    • Without animations, websites can feel robotic and glitchy.
    • When overdone, they can frustrate or hurt users. (Too long, too much motion, distracting, etc.)
    • When thoughtfully implemented, animations make interactions, and thus the website, feel grounded in reality.
    • Like the website is a natural extension of the physical world.

  12. 2.2

    Developer experience. Nowhere near as important as user experience but still important in terms of getting things done.

  13. 2.2.1

    With the View Transitions API, creating these animations is straightforward. Developers no longer have to wrangle all of the positioning and motion logic. The platform handles the complexity so you don't have to.

  14. 2.2.2

    Historically, implementing animations required libraries like GSAP or Framer Motion. The View Transitions API removes the need for any dependencies, reducing project complexity and load times while aligning with modern web standards. It’s easy to implement and doesn’t balloon your project’s bundle size. Developers can focus on implementing the animations instead of dealing with dependency conflicts.

  15. 2.2.3

    The API abstracts much of the heavy lifting, handling key parts of animations that used to require lots of tedious work.
    The easy stuff is really easy, the hard stuff is reasonably hard, not unreasonably.

  16. 3

    There are two different types of view transitions, same-document and cross-document.

  17. 3.1

    • Same-document view transitions.
    • These are often referred to as SPA view transitions but that's a misnomer.
    • Just because they're activated with JavaScript doesn't mean they're only for SPAs.
    • They can be used on any web page, regardless of if it's an SPA.

  18. 3.1.1

    • In Chrome for over one and a half years, coming up on 2 years.
    • Currently being worked on by the Firefox team.
    • In Safari for a bit over 2 months.

  19. 3.1.3

    1. Show how to open animations drawer.
    2. Pause animations and click button.
    3. Scrub through the animation.
    4. Play the animation at 25% speed.
    5. Show the view transition pseudo elements.
    6. Look at the styles on the element with the popover attribute.
    7. Look at the styles on the <html> element.

  20. 3.2

  21. 3.2.1

    You might have heard about this meta tag before.
    Don't use it.
    It was experimental.
    These days it's deprecated.

  22. 3.2.2

  23. 3.2.3

    • In Chrome for almost 6 months.
    • Not yet in Firefox, they'll likely be working on it next year. Their standards position on it is positive.
    • Currently being worked on by the Safari team.

  24. 3.2.4

    1. Tell audience to look at the URL bar.
    2. Pause animations and click the link.
    3. Look at the view transitions pseudo elements.
    4. Point out that the URL bar has changed.
    5. Point out that the DOM has changed.
    6. Scrub through the animations.
    7. Unpause animations.

  25. 4

  26. 4.1

    This is a lot to try and wrap your head around, but don't worry we have a visualisation.

  27. 4.2

    Explain what "Main DOM", "Transition root" and "User sees" are.

  28. 4.3

    This is a lot to try and wrap your head around, so lets look at a visualisation.

  29. 4.4

  30. 5

  31. 5.1

  32. 5.2

  33. 5.3

  34. 6

    • ::view-transition: The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.
    • ::view-transition-group(): The root of a single view transition.
    • ::view-transition-image-pair(): The container for a view transition's old and new views — before and after the transition.
    • ::view-transition-old(): A static snapshot of the old view, before the transition.
    • ::view-transition-new(): A live representation of the new view, after the transition.
    • Both are render as CSS 'replaced content' (like an <img>).

  35. 6.1

    There won't always necessarily be both of the old & new pseudo-elements.
    If there's no view transition with a matching name in either capture then the respective capture won't have a pseudo element.

  36. 6.2

    Shout out to Bramus, this is amazing

  37. 7

  38. 7.1

  39. 7.2

    Again shout out to Bramus, these are amazing

  40. 7.3

  41. 7.3.1

  42. 7.3.2

  43. 7.3.3

  44. 7.3.4

  45. 8

  46. 8.1

  47. 8.2

    These are the default styles built into the browser for view transitions

  48. 8.2.1

    Give the root element a default view transition name, to allow it to be independently selected.

  49. 8.2.2

    • The root view transition pseudo-element covers the entire snapshot containing block so that each group pseudo-element can lay out relative to it.
    • The snapshot containing block is basically the viewport.

  50. 8.2.3

  51. 8.2.4

    • Because of styles on the image-pair pseudo-element you can essentially treat the old and new pseudo-elements as direct children of the group pseudo-element for most purposes.

  52. 8.2.5

    • Style old and new to match the size and position set on the group without breaking their aspect ratios.

  53. 8.2.6

  54. 8.3

  55. 8.3.1

  56. 8.3.2

  57. 8.3.3.1

    Remove the animation and set the blend mode to normal so only the new image is visible.

  58. 8.3.3.2

  59. 8.3.3.3

  60. 8.3.3.4

    Same as the last one except we're setting the height to be the same as the group, and then clipping any overflow. That way when we set object fit contain and cover on the old and new respectively we don't get any unwanted overflowing.

  61. 8.3.3.5

  62. 8.3.3.6

  63. 8.3.4

    Don't want to show the old video, which is frozen.
    Don't want to fade in the new video, especially if we're not showing the old view.
    Add a low quality placeholder background image, if you don't want a flash of the page's background colour.

  64. 8.3.4.1

  65. 8.3.4.2

  66. 8.4

  67. 8.4.1

    The event has two objects:

    1. event.activation which contains a NavigationActivation object.
    2. event.viewTransition which contains a ViewTransition object, surprise surprise.

  68. 8.4.1.1

  69. 8.4.2

    This event only has event.viewTransition, no event.activation.
    You can still get access the NavigationActivation object though, just now it is a global object: window.navigation.

  70. 8.4.2.1

    You can set up a specific named view transition that you only want to happen if the user has come from a certain page.

  71. 8.4.3

  72. 8.4.3.1

    It's a pseudo-class not a pseudo-element, don't forget that like I did and then spend far too long scratching your head about why it's not working.

  73. 8.4.3.2

  74. 8.5

  75. 8.6

  76. 8.6.1

  77. 8.6.2

  78. 8.6.3

  79. 8.6.4

  80. 8.6.5

    In Designing Safer Web Animation For Motion Sensitivity Val Head says:
    On a basic level, animating an element’s movement makes its path visible on screen. Your user doesn’t have to keep track of the movement in their head. Instead, that effort is essentially off-loaded from their brain to the animation you created on screen. When you reduce cognitive load, you free up users’ working memory resources to focus on other things—like learning new skills and retaining information.
    Beyond the cognitive load benefits, other studies show that animation can improve decision-making and even help people learn and remember spatial relationships. Animating between states can also help prevent change blindness. In short: Animation can free up your brain power and make an interface easier to understand—the benefits can’t be ignored.

  81. 9

  82. 9.1

    Why should you use view transitions?
    Why should you care about view transitions?

  83. 9.1.1

    Users.
    You want to improve their experience on your website or webapp!
    You want to make it intuitive.
    …
    Well, as you've learnt today, view transition are an amazing tool to for that.

  84. 9.2

    So, now that you're feeling motivated, lets give that motivation some direction!
    On the next page or component you build, you should add a view transition.

  85. 9.2.1

    We dove into the complexity today but don't forget, it can be as simple as just adding one line!

  86. 999

    Thank you so much for listening everyone!
    You can scan that QR code or head to the link ellyloel.com to head to my website where you can also find links to all my other socials.