Add support for different view transition animations for the default transition type #2016

felixarntz · 2025-05-20T00:40:30Z

Summary

See #1997

Relevant technical choices

Adds new default-animation argument (and optional default-animation-args argument) to the view-transitions theme support arguments.
Adds a view transition animation class and corresponding registry to handle view transition animations. Each view transition animation consists of:
- A unique slug
- CSS to be loaded
- Whether the global view transition names should be applied for this animation
- Whether the post-specific view transition names should be applied for this animation
- Optional arguments for fine tuning (e.g. exact angle from which a wipe animation occurs)
- Optional aliases (can also be used as a "short hand" for certain common argument values; e.g. "wipe-from-bottom" is an alias for the general "wipe", but as indicated will then configure the angle so that the wipe comes from the bottom of the screen)
By default, the follow animations are available: fade (default), slide, swipe, wipe.

As with the other changes, all of this code was already implemented before in WordPress/wordpress-develop#8370. See WordPress/wordpress-develop#8370 (comment) for additional information on the available animations (ignore the points on the other transition types than default for now).

To test this locally, you can either add theme support with the arguments in your current theme, or temporarily alter the default that the plugin adds by itself. Make sure to run npm run build:plugin:view-transitions first, to ensure the built CSS and JavaScript is available.

A follow up PR will add a settings UI to change this default transition animation, to make it easy to modify for end users of the plugin, without touching code.

…transition type.

codecov · 2025-05-20T00:54:45Z

Codecov Report

Attention: Patch coverage is 64.23077% with 93 lines in your changes missing coverage. Please review.

Project coverage is 72.18%. Comparing base (b0310ee) to head (05cb442).
Report is 20 commits behind head on trunk.

Files with missing lines	Patch %	Lines
plugins/view-transitions/includes/theme.php	71.42%	40 Missing ⚠️
.../class-plvt-view-transition-animation-registry.php	41.66%	28 Missing ⚠️
.../includes/class-plvt-view-transition-animation.php	65.27%	25 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2016      +/-   ##
==========================================
- Coverage   72.50%   72.18%   -0.32%     
==========================================
  Files          88       90       +2     
  Lines        7146     7399     +253     
==========================================
+ Hits         5181     5341     +160     
- Misses       1965     2058      +93

Flag	Coverage Δ
multisite	`72.18% <64.23%> (-0.32%)`	⬇️
single	`40.93% <64.23%> (+0.78%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-05-20T00:54:58Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: felixarntz <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: b1ink0 <[email protected]>
Co-authored-by: ShyamGadde <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

plugins/view-transitions/includes/theme.php

mukeshpanchal27

Thanks for the PR. Overall, it looks solid to me. I've left a few nonblocking feedbacks, but I'm pre-approving it.

plugins/view-transitions/includes/theme.php

plugins/view-transitions/includes/class-plvt-view-transition-animation.php

Co-authored-by: Aditya Dhade <[email protected]>

Co-authored-by: Shyamsundar Gadde <[email protected]>

…ons.

b1ink0 · 2025-05-23T18:11:57Z

plugins/view-transitions/includes/class-plvt-view-transition-animation.php

+	public function get_stylesheet( string $alias = '', array $args = array() ): string {
+		if ( $this->use_stylesheet ) {
+			// phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
+			$css = file_get_contents( plvt_get_asset_path( "css/view-transition-animation-{$this->slug}.css" ) );


Do we plan to open this class to developers? If so, it currently has a hardcoded asset path that points to the current feature plugin directory. Does it make sense to add a stylesheet_path to extract its contents? However, the developer could also just add this logic to the get_stylesheet_callback. I was just thinking of abstracting the file_get_contents logic from the developer.

Great idea! I think the most intuitive solution for ease of use and flexibility would be to overload the use_stylesheet argument to optionally be a path string. Will update.

I think it could be renamed to just stylesheet and set to null by default in that case, as use_stylesheet makes it sound like a condition.

I'm not sure yet. Right now, all the internal usage does use it like a condition. Naming it stylesheet with a value of null suggests to me that it would require a string, but it also supports a boolean.

I don't think there's a clear right or wrong answer here, I'd prefer to stick to use_stylesheet for now since that's more in line with how the argument is used in the plugin so far.

Fixed in 0ebe9da

I think we should remove the hardcoded path completely to make it more explicit. Passing plvt_get_asset_path( "css/view-transition-animation-slug.css" ) while registering the animation would be better. This could also mean the use_stylesheet type could become false|string.

performance/plugins/view-transitions/includes/theme.php

Lines 141 to 150 in 05cb442

$animation_registry->register_animation(

'slide',

array(

'aliases' => array(

'slide-from-right',

'slide-from-bottom',

'slide-from-left',

'slide-from-top',

),

'use_stylesheet' => true,

Like this:

'use_stylesheet' => plvt_get_asset_path( 'css/view-transition-animation-slug.css' ),

I would say let's re-evaluate this separately. I think for now the current approach works well because:

It makes it easy to use it with the plugin's own animations (by not requiring specification of a redundant path because within the plugin the path is predictable).

It makes it flexible by allowing to specify the path for external animation registrations.

If we required the path, it would make the first point more difficult, so I'm not sure that's a good idea. We can discuss this further in a separate issue and consider changing in the future. Since it's an experimental feature plugin, we'll still be able to change this at any time.

Okay, thanks, this makes sense. I was just thinking along the lines of this eventually being merged into core, so we should avoid hardcoding. But as you said, we can change this at any time, so no issue.

Add support for different view transition animations for the default …

a854642

…transition type.

felixarntz requested review from ShyamGadde, b1ink0, mukeshpanchal27 and swissspidy May 20, 2025 00:40

felixarntz added [Type] Enhancement A suggestion for improvement of an existing feature no milestone PRs that do not have a defined milestone for release [Plugin] View Transitions Issues for the View Transitions plugin labels May 20, 2025

felixarntz mentioned this pull request May 20, 2025

Implement View Transitions feature plugin #1997

Open

9 tasks

mukeshpanchal27 reviewed May 20, 2025

View reviewed changes

plugins/view-transitions/includes/theme.php Show resolved Hide resolved

mukeshpanchal27 approved these changes May 23, 2025

View reviewed changes

plugins/view-transitions/includes/theme.php Outdated Show resolved Hide resolved

plugins/view-transitions/includes/theme.php Outdated Show resolved Hide resolved

b1ink0 reviewed May 23, 2025

View reviewed changes

plugins/view-transitions/includes/class-plvt-view-transition-animation.php Outdated Show resolved Hide resolved

b1ink0 reviewed May 23, 2025

View reviewed changes

plugins/view-transitions/includes/class-plvt-view-transition-animation.php Outdated Show resolved Hide resolved

ShyamGadde reviewed May 23, 2025

View reviewed changes

plugins/view-transitions/includes/class-plvt-view-transition-animation.php Outdated Show resolved Hide resolved

felixarntz and others added 6 commits May 23, 2025 10:41

Fix incorrect path reference in comment.

06a7a35

Co-authored-by: Aditya Dhade <[email protected]>

Fix typo.

d012d51

Co-authored-by: Shyamsundar Gadde <[email protected]>

Merge branch 'trunk' into enhance/view-transition-animations

80e2bb0

Consistently use plvt prefix instead of wp for assets (mostly CSS).

8adf5fe

Make get_stylesheet_callback handling more consistent.

673d14b

Use inline callback functions to avoid duplicate logic across animati…

b7f65f2

…ons.

b1ink0 reviewed May 23, 2025

View reviewed changes

felixarntz added 2 commits May 23, 2025 11:24

Allow use_stylesheet to be a string for the CSS file path.

0ebe9da

Fix asset handle prefix in tests.

05cb442

felixarntz requested review from ShyamGadde and b1ink0 May 23, 2025 20:41

ShyamGadde approved these changes May 26, 2025

View reviewed changes

felixarntz merged commit 456f3b8 into trunk May 27, 2025
23 checks passed

felixarntz deleted the enhance/view-transition-animations branch May 27, 2025 17:46

felixarntz removed the no milestone PRs that do not have a defined milestone for release label May 28, 2025

felixarntz added this to the view-transitions 1.0.0 milestone May 28, 2025

	$animation_registry->register_animation(
	'slide',
	array(
	'aliases' => array(
	'slide-from-right',
	'slide-from-bottom',
	'slide-from-left',
	'slide-from-top',
	),
	'use_stylesheet' => true,

Add support for different view transition animations for the default transition type #2016

Add support for different view transition animations for the default transition type #2016

Uh oh!

Conversation

felixarntz commented May 20, 2025

Summary

Relevant technical choices

Uh oh!

codecov bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading