Swup – Animated page transitions with css

In plain words

Swup is a JavaScript library that enables animated page transitions on websites using CSS. It allows developers and designers to create smooth transition effects between pages, bringing mobile-app-like animation experiences to web browsers. The tool is designed for developers who want to enhance user experience through polished, choreographed page navigation without building animations from scratch.

written from the facts on this page · September 2026

From the sources

As Sarah mentioned in her previous post about page transition using Vue.js , there is plenty of motivation for designers and developers to be building page transitions. Let’s consider mobile applications. While mobile applications are evolving, more and more attention is given to the animation experience, while the web pretty much stays the same. Why is that? Maybe it’s because native app developers spend more time working on those animations. Maybe it’s because users say that’s what they want. Maybe it’s because they know more about the environment in which the app is going to run. All of that helps to improve the experience over time. Overall, it seems like mobile app developers…from css-tricks.com

• 
  RoughNotation – create and animate hand-drawn annotations on a web page2020 · roughnotation.com · ▲696

  A small JavaScript library to create and animate hand-drawn annotations on a web page

• 
  CSSeffectsSnippets.2019 · emilkowalski.github.io · ▲292

  A collection of CSS effects with a click to copy.

• 
  Anime.js – Polyvalent JavaScript Animation Engine2016 · anime-js.com · ▲283

  A fast, multipurpose and lightweight JavaScript animation library

• 
  Motion One – New animation library, built on the Web Animations API2021 · motion.dev · ▲327

  Motion (prev Framer Motion) is a fast, production-grade animation library for React, JavaScript and Vue. Build smooth UI animations at a tiny footprint.

• 
  We built swup+fragment-plugin to visually enhance classic websites2023 · swup-fragment-plugin.netlify.app · ▲21

  ## TL;DR - Progressively enhance your classic website / MPA to a single page app. - Support for fragment visits, comparable to nested routes in React or Vue. - Keep your site crawlable and indexable without any of the overhead of SSR. - No tight coupling of back- and frontend. Use the CMS / Framework / SSG of your choice. - Strong focus on interoperability with DOM-altering JS tools (think Alpine.js, jQuery, ...). - Strong focus on accessibility, even for fragment visits. ## Long Version: Best of three worlds Hi, I'm Rasso Hilber. I have been a web designer and developer since…

• RJ
  Rune.js – Graphic design systems with SVG in the browser or Node.js2015 · runemadsen.github.io · ▲92

  A JavaScript library for programming graphic design systems with SVG

• 
  SimCity, but with Permits▲930

  A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.

  Life & fun · 3d ago · permit.petercai.com

• IV
  I've been paying for a rural Tanzanian's education for 10 years▲778

  Life & fun · 15d ago · tanzaniaeducationproject.org

• 
  Bigwords.page – Turn any screen into a sign. The URL is the app▲728

  Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.

  Life & fun · 16d ago · bigwords.page

• 
  Guitoro, a virtual guitar you strum with your keyboard▲573

  Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.

  Life & fun · 10d ago · guitoro.com

• 
  See *almost* any carriers phone settings▲432

  Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.

  Life & fun · 14d ago · carrierexplode.com

• 
  The whole Solar System and every tracked satellite, live in the browser▲407

  Life & fun · 24d ago · space.bl2.net

• 
  Google Duplex▲1,447

  An AI assisstant that can talk on the phone 🤖

  AI · 2018 · research.google

• 
  Lobe▲1,236

  Visual tool for building custom deep learning models

  AI · 2018 · github.com

• 
  Screely▲1,099

  Instantly turn screenshots into beautiful images

  Growth · 2018 · screely.com

• 
  Fugue▲1,000

  Free stock music for your videos, games and UI

  Growth · 2018 · icons8.com

• 
  Spirit▲754

  The animation tool for the web.

  Dev tools · 2018 · spiritapp.io

• 
  Google Trends▲700

  A new experience to explore what the world is searching 🔎📈📊

  Life & fun · 2018 · trends.google.com