⭐ If you find this content useful please give it a star on Github. ⭐
- Overview
- Full Example
|
|
Note that if you are interested in similar functionality in the world of scroll-driven animations then also check out the following video Justin and myself did with a specific focus on scroll-driven animation: https://www.youtube.com/watch?v=XpGsLlx00fU
The following is an example demo site that uses CSS View Transitions between HTML page navigations. Note that there is no JavaScript* used here, it is exclusively just regular <a href=""> navigations to HTML pages. You can check the URL change as you use the example.
* JavaScript is used only to save/get your selected favourites in the browser local storage, and not used in any navigations and/or animation.
The only requirements are adding the following CSS:
@view-transition {
navigation: auto;
}After adding the above CSS you then need to assign a unique view-transition-name: via CSS (I just added it as an inline style, i.e. <li style="view-transition-name: any-unique-identifier-value-here"> on the both the starting and ending pages), and then browser should automatically animate the same element between the two pages as your navigate.
All code is generated as plain HTML via Astro SSG from the src folder. It is automatically deployed from this repo to https://css-view-transition.vercel.app/. All other (smaller scale) examples are in the examples folder.
Note that for these smaller examples, it is assumed that you merely care about the code used to create the examples, and that actually testing the examples out are of secondary concern. For this reason, they aren't deployed online (unlike the full demo). However, you are welcome to clone/download this repository and then follow the steps below, if you want to see them in action.
"Hello World" (examples/basic-intro)
You should be able to open either index.html or reversed.html directly in your browser as a starting point.
Basic Sorting (examples/basic-sorting)
This example uses an external stylesheet, so it is recommended that you run it through HTTP (and not open the file directly). If you are using VS Code, then you can use the following extension. Alternatively, you should be able to use any server emulation software as well (for example XAMPP, etc.)
Static Site Generation (SSG) (examples/filtering-ssg)
In addition to using HTTP (as per the above example). The actual HTML files itself is generated by means of running the build.mjs file via node: node build.mjs. If you are doing Static Site Generation you are probably using Astro, 11ty or one of the following tools - the build.mjs is just to show the concept with as minimal code as possible.
If you want to test the example above you need Node installed locally, however the principles/concept should be exactly the same regardless of what tool you are using for SSG.
Server Side Rendering (SSR) (examples/filtering-ssr)
Similar to the above you need HTTP and Node if you want to run the actual example.
However, if you are doing purely server-side rendering you are probably using Express / NestJS / Fastify (Node), Django / Flask (Python), or Laravel / Wordpress (PHP). However, the server.mjs file in the example is just to show the concept with as minimal code as possible. You can start the server by running node server.mjs.
Vanilla JavaScript (examples/filtering-client)
This example is a single HTML page that simply pulls in a script.js file to generate the content in the browser itself with Javascript. This example is effectively the same as all examples above, but uses the JavaScript document.startViewTransition method instead of the @view-transition CSS rule.
You should be able to simply open the index.html directly, but it is recommended that you use HTTP to serve the file locally.
In the example the HTML is simply replaced with each change via the innerHTML method (instead of moving actual DOM nodes around). This is significant since it means that the animation uses the view-transition-name assignment, to determime when something is the same element (for animation purposes) regardless whether it is a completely newly created HTML DOM node. Note view-transition-name only influences the animation, and other rules around DOM references (for example focus state) still apply.
Custom Animations (examples/custom-animations)
In this example, there aren't any actual changes to the HTML/DOM structure. The innerText value of the <span id="value">0</span> is simply updated based on whether the plus/minus buttons are clicked.
Using with React (examples/filtering-react)
Note that when using React, due to React automatically resolving/evaluating state updates in parallel/asynchronously under the hood you need to wrap your document.startViewTransition method with the flushSync function provided by react-dom (as in the example).