Meet swup

This looks like a handy library for managing page transitions on sites that are not single page apps.

Here’s the code.

I’ve said it before and I’ll say it again, but I really think that this handles 80% of the justification for using a single page app architecture.

Tagged with

Responses

Related links

New magic for animations in CSS | Chase McCoy

Hallelujah! We’re finally getting our two wishes for CSS animations and transitions:

  1. Animating to and from display: none; for the sake of enter/exit animations.
  2. Animating to and from the intrinsic size of an element (such as height: auto;).

Tagged with

Modern CSS in Real Life - Chris Coyier

This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.

Tagged with

WICG/shared-element-transitions

I’m very excited about this proposal for animating transitions between web pages!

I’m less excited about doing it for single page apps, but I get why it’s the simplest place to start.

This builds on Jake’s earlier proposal which I always thought was excellent and much needed. I’m not the only one. Chris agrees.

Tagged with

CSS transitions and hover animations, an interactive guide

This is a really nice introduction to CSS transitions with interactive demos you can tinker with.

Tagged with

jakearchibald/navigation-transitions

I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.

Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.

Tagged with

Related posts

Portals and giant carousels

Trying to understand why people think they need to make single page apps.

Media queries with display-mode

I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.

Service worker weirdness in Chrome

Debugging an error message.

Navigation preloads in service workers

A little performance boost for your network-first service worker strategy.

Manual ’till it hurts

Try writing your HTML in HTML, your CSS in CSS, and your JavaScript in JavaScript.