Skip to content

Instantly share code, notes, and snippets.

@domchristie

domchristie/index.html

Last active June 27, 2023 10:37
Show Gist options
  • Save domchristie/c79f28217c3d123cbe9e9435fff72371 to your computer and use it in GitHub Desktop.
Save domchristie/c79f28217c3d123cbe9e9435fff72371 to your computer and use it in GitHub Desktop.
Download ZIP
Transitioning a playing Video with Turbo + Turn
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Videos</title>
<script src="script.js" type="module"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="one.html">Zoom In</a>
<div style="width: 16rem;">
<video controls id="video" data-turbo-permanent src="…"></video>
</div>
</body>
</html>
Raw
one.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
<script src="script.js" type="module"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="index.html">Zoom Out</a>
<div style="width: 54rem;">
<video controls id="video" data-turbo-permanent src="…"></video>
</div>
</body>
</html>
Raw
script.js
import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo'
import Turn from 'https://cdn.skypack.dev/@domchristie/turn'
window.Turn = window.Turn || Turn
Turn.config.experimental.viewTransitions = true
Turbo.start()
Turn.start()
Raw
style.css
body {
font-family: system-ui;
}
::view-transition-old(video) {
display: none;
}
::view-transition-new(video) {
animation: none;
}
video {
width: 100%;
view-transition-name: video;
contain: layout;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment