-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
29 lines (29 loc) 路 2.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turn: Animate Page Transitions in Turbo Drive Apps</title>
<link rel="stylesheet" href="./examples/theme.css">
</head>
<body>
<nav>
<a href="https://github.com/domchristie/turn">Source</a>
</nav>
<main>
<h1>Turn</h1>
<p>Turn is a library for animating page transitions in Turbo Drive apps. It applies various class names to the HTML element during the lifecycle of a navigation. Targeted elements can then use these classes to apply animations. It supports View Transitions and can be used with a combination of the two approches.</p>
<h2>Examples</h2>
<ol>
<li><a href="./examples/animations-only/">Basic</a>: immediate exit animations, followed by enter animations (without View Transitions)</li>
<li><a href="./examples/view-transitions-only/">View Transitions</a>: transitions common elements between pages (where supported, without a fallback)</li>
<li><a href="./examples/fallback/">Fallback</a>: animate with View Transitions, with a fallback to custom exit/enter animations</li>
<li><a href="./examples/hybrid-basic/">Hybrid Basic</a>: combines custom CSS exit and enter animations with View Transitions for common elements between pages</li>
<li><a href="./examples/hybrid-advanced/">Hybrid Advanced</a>: similar to the basic example but only uses a custom CSS exit animation; the enter animations are achieved with a View Transition</li>
<li><a href="./examples/animate-restore/">Animate Restore</a>: animating restoration visits from native controls is generally discouraged, but if your app has Back links, this approach provides a nice user experience</li>
</ol>
<!-- <p><a href="https://github.com/domchristie/turn">Turn</a> is a JavaScript library for animating page navigations in <a href="https://turbo.hotwired.dev/">Turbo Drive</a> applications. It works both with and without <a href="https://developer.chrome.com/docs/web-platform/view-transitions/">View Transitions</a>, or and you can use a combination of View Transitions and custom CSS animations.</p> -->
</main>
</body>
</html>