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

6 CSS Snippets Every Front-End Developer Should Know In 2025 · 19 January 2025

  • Springy easing with linear()
  • Typed custom properties
  • View transitions for page navigation
  • Transition animation for dialog and popover
  • Transition animation for details
  • Animated adaptive gradient text

Tagged with

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

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.