Change view transition behaviour based on clicked element #624

Tc-001 · 2023-07-21T19:29:39Z

Tc-001
Jul 21, 2023
Collaborator

Body

Summary

Create an API where 2 links on the same page can produce different transition effects.

Background & Motivation

Currently the (experimental) view transition animations can be specified per-element, but that is a bit limiting for a more animated site.

For example, if I have a site similar to nord's:

I may want "Social Responsibility" to slide to the right, while "Emergency VPN" slides to the left.

Similar would be sites with a sidebar like Astro docs maybe sliding up/down depending on the page.

Goals

A concise, bulleted-list outlining the intended goals of this RFC.

Allow links to "override" the default transition effect for some/all elements

Example

---
import { ViewTransitions } from 'astro:transitions';
import { fade } from 'astro:transitions';
---
<html>
  <head>
    <title>My App</title>
    <ViewTransitions />
  </head>
  <body>
    <div transition:animate="morph" transition:name="main">
      <a href="/"> This will use default behaviour! </a>
      <a 
        href="/" 
        transition:override={{name: "main", transition: "slide"}}
      > This will slide! </a>
      <a 
        href="/" 
        transition:override={{name: "main", transition: fade({ duration: '0.4s' })}}
      > Also supports params! </a>

      <a 
        href="/" 
        transition:override={{name: "main", transition: fade({ duration: '0.4s' })}}
        transition:override={{name: "footer", transition: "slide"}}
      > Target multiple transitions? </a>
    </div>

    <footer transition:name="footer"> foo </footer>
  </body>
</html>

Disclaimer: I have only a surface-level knowledge about view transitions, this seemed like an obvious (and probably already being worked on) gap that I wanted to get out while playing with them

AdamFipke · 2025-08-06T20:03:31Z

AdamFipke
Aug 6, 2025

I have pretty much this exact situation! I would love for the ability to slide forward/backward based on if the link I'm clicking on is "left" or "right" of where the user currently is.

I think there might (?) be a way to hack it to change the direction of the animation based on what page is being navigated from/to, but it's a little jank. And more importantly, I don't think there's any way to have a default "fade" animation for all links on the site and then only have this slide animation for specific links.
The element being transitioned is always the body, the animation itself just needs to change based on what link is being clicked.

I do realise that this initial proposal was from 2 years ago though, perhaps there's a method to do this now that I am just unaware of?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Change view transition behaviour based on clicked element #624

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Change view transition behaviour based on clicked element #624

Uh oh!

Uh oh!

Tc-001 Jul 21, 2023 Collaborator

Body

Summary

Background & Motivation

Goals

Example

Replies: 1 comment

Uh oh!

AdamFipke Aug 6, 2025

Tc-001
Jul 21, 2023
Collaborator

AdamFipke
Aug 6, 2025