Initial support for magic move transitions.

Author: samuel-williams-shopify

lib/presently/display_view.rb

@@ -59,7 +59,7 @@ def render(builder)
 			slide = @controller.current_slide
 			return unless slide
 
-			builder.tag(:div, class: "display") do
+			builder.tag(:div, class: "display", data: {transition: slide.transition}) do
 				builder.tag(:div, class: "slide-container") do
 					@slide_renderer.render_slide(builder, slide)
 				end

lib/presently/environment/application.rb

@@ -25,7 +25,7 @@ def slides_root
 			# Defaults to the gem's bundled templates.
 			# @returns [String] Absolute path to the templates root.
 			def templates_root
-				File.expand_path("../../templates", __dir__)
+				File.expand_path("../../../templates", __dir__)
 			end
 
 			# The application class to use.

lib/presently/slide.rb

@@ -53,6 +53,12 @@ def title
 			@frontmatter&.fetch("title", File.basename(@path, ".md")) || File.basename(@path, ".md")
 		end
 
+		# The transition type for animating into this slide.
+		# @returns [String | Nil] The transition name (e.g. `"fade"`, `"slide-left"`, `"magic-move"`), or `nil` for instant swap.
+		def transition
+			@frontmatter&.fetch("transition", nil)
+		end
+		
 		# The line range to focus on for code slides.
 		# @returns [Array(Integer, Integer) | Nil] The `[start, end]` line numbers (1-based), or `nil`.
 		def focus
@@ -130,7 +136,7 @@ def parse_sections(text)
 		# @returns [String] The rendered HTML.
 		def render_markdown(text)
 			return "" if text.nil? || text.empty?
-			Markly.render_html(text)
+			Markly.render_html(text, flags: Markly::UNSAFE)
 		end
 	end
 end

public/_static/index.css

@@ -259,10 +259,6 @@ pre > syntax-code {
 	position: relative;
 }
 
-.display .slide {
-	animation: slide-in 0.4s ease-out;
-}
-
 .display .slide-counter {
 	position: absolute;
 	bottom: 1rem;
@@ -271,16 +267,88 @@ pre > syntax-code {
 	opacity: 0.4;
 }
 
-/* Slide transition animations */
-@keyframes slide-in {
-	from {
-		opacity: 0;
-		transform: translateX(30px);
-	}
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
+/* ========================
+   VIEW TRANSITIONS
+   ======================== */
+
+/* Give the live-view element the transition name — there's only ever one */
+live-view:has(.display) {
+	view-transition-name: slide-container;
+}
+
+/* Default: no animation for the container (instant swap) */
+::view-transition-old(slide-container),
+::view-transition-new(slide-container) {
+	animation: none;
+}
+
+/* Fade */
+html[data-transition="fade"]::view-transition-old(slide-container) {
+	animation: vt-fade-out 0.4s ease-in-out;
+}
+
+html[data-transition="fade"]::view-transition-new(slide-container) {
+	animation: vt-fade-in 0.4s ease-in-out;
+}
+
+/* Slide left */
+html[data-transition="slide-left"]::view-transition-old(slide-container) {
+	animation: vt-slide-out-left 0.4s ease-in-out;
+}
+
+html[data-transition="slide-left"]::view-transition-new(slide-container) {
+	animation: vt-slide-in-right 0.4s ease-in-out;
+}
+
+/* Slide right */
+html[data-transition="slide-right"]::view-transition-old(slide-container) {
+	animation: vt-slide-out-right 0.4s ease-in-out;
+}
+
+html[data-transition="slide-right"]::view-transition-new(slide-container) {
+	animation: vt-slide-in-left 0.4s ease-in-out;
+}
+
+/* Magic move — the browser interpolates position/size for matched
+   view-transition-name elements. No cross-fade on the container
+   to avoid background dimming. */
+html[data-transition="magic-move"]::view-transition-old(slide-container) {
+	animation: none;
+	opacity: 0;
+}
+
+html[data-transition="magic-move"]::view-transition-new(slide-container) {
+	animation: none;
+}
+
+@keyframes vt-fade-out {
+	from { opacity: 1; }
+	to { opacity: 0; }
+}
+
+@keyframes vt-fade-in {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes vt-slide-out-left {
+	from { transform: translateX(0); opacity: 1; }
+	to { transform: translateX(-100%); opacity: 0; }
+}
+
+@keyframes vt-slide-in-right {
+	from { transform: translateX(100%); opacity: 0; }
+	to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes vt-slide-out-right {
+	from { transform: translateX(0); opacity: 1; }
+	to { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes vt-slide-in-left {
+	from { transform: translateX(-100%); opacity: 0; }
+	to { transform: translateX(0); opacity: 1; }
 }
 
 /* ========================

public/application.js

@@ -13,7 +13,6 @@ function applyCodeFocus() {
 		const focusEnd = parseInt(viewport.dataset.focusEnd);
 
 		if (!focusStart || !focusEnd) {
-			// No focus specified - reset
 			const scroll = viewport.querySelector('.code-scroll');
 			const dimTop = viewport.querySelector('.code-dim-top');
 			const dimBottom = viewport.querySelector('.code-dim-bottom');
@@ -28,33 +27,27 @@ function applyCodeFocus() {
 		const dimBottom = viewport.querySelector('.code-dim-bottom');
 		if (!scroll) return;
 
-		// Wait for content to render, then calculate positions
 		requestAnimationFrame(() => {
-			// Find the pre element and measure line height
 			const pre = scroll.querySelector('pre');
 			if (!pre) return;
 
-			// Get computed line height from the code content
 			const code = pre.querySelector('code, syntax-code') || pre;
 			const style = getComputedStyle(code);
 			const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.6;
 
 			const padding = parseFloat(getComputedStyle(scroll).paddingTop) || 16;
 			const viewportHeight = viewport.clientHeight;
 
-			// Calculate pixel positions for focus region
 			const focusTopPx = padding + (focusStart - 1) * lineHeight;
 			const focusBottomPx = padding + focusEnd * lineHeight;
 			const focusHeight = focusBottomPx - focusTopPx;
 
-			// Center the focus region in the viewport
 			const targetCenter = focusTopPx + focusHeight / 2;
 			const viewportCenter = viewportHeight / 2;
 			const translateY = Math.min(0, viewportCenter - targetCenter);
 
 			scroll.style.transform = `translateY(${translateY}px)`;
 
-			// Position the dim overlays
 			const dimTopHeight = Math.max(0, focusTopPx + translateY);
 			const dimBottomHeight = Math.max(0, viewportHeight - (focusBottomPx + translateY));
 
@@ -64,8 +57,44 @@ function applyCodeFocus() {
 	});
 }
 
-// Re-highlight and apply focus after Live DOM updates:
+// Detect the transition type from the incoming HTML before morphdom applies it.
+function detectTransition(html) {
+	const match = html.match(/data-transition="([^"]+)"/);
+	return match ? match[1] : null;
+}
+
+// Track the active view transition so we can skip overlapping ones.
+let activeTransition = null;
+
+// Wrap Live's update method to support view transitions.
+const originalUpdate = live.update.bind(live);
+live.update = function(id, html, options) {
+	// Only apply transitions on the display view, not the presenter:
+	const transition = document.querySelector('.display') ? detectTransition(html) : null;
+	
+	if (transition && document.startViewTransition && !activeTransition) {
+		document.documentElement.dataset.transition = transition;
+		
+		activeTransition = document.startViewTransition(() => {
+			originalUpdate(id, html, options);
+		});
+		
+		activeTransition.finished.finally(() => {
+			delete document.documentElement.dataset.transition;
+			activeTransition = null;
+			Syntax.highlight();
+			applyCodeFocus();
+		});
+	} else {
+		originalUpdate(id, html, options);
+		Syntax.highlight();
+		applyCodeFocus();
+	}
+};
+
+// Re-highlight and apply focus after non-update DOM mutations (e.g. replace):
 const observer = new MutationObserver(() => {
+	if (activeTransition) return;
 	Syntax.highlight();
 	applyCodeFocus();
 });

slides/01-welcome.md

@@ -5,7 +5,7 @@ duration: 30
 
 # Title
 
-Welcome to Presently
+<div style="view-transition-name: welcome-title">Welcome to Presently</div>
 
 # Subtitle
 

slides/02-translation.md

@@ -1,11 +1,12 @@
 ---
 template: translation
 duration: 30
+transition: magic-move
 ---
 
 # Title
 
-The best way to predict the future is to create it.
+<div style="view-transition-name: welcome-title">The best way to predict the future is to create it.</div>
 
 # Translation
 

slides/04-code-example.md

@@ -1,7 +1,7 @@
 ---
 template: code
 duration: 60
-focus: 2-8
+focus: 2-10
 title: Initialization
 ---
 

slides/05-code-navigation.md

@@ -1,7 +1,7 @@
 ---
 template: code
 duration: 60
-focus: 21-35
+focus: 20-36
 title: Navigation
 ---
 

slides/07-section.md

@@ -1,6 +1,7 @@
 ---
 template: section
 duration: 15
+transition: slide-left
 ---
 
 # Heading