jolly-crimson

Are ViewTransitions implemented in Link components?

Do specific transition types work on Link components? I see typescript types in the packages, but no documentation currently, and cant seem to get them to work correctly. It keep defaulting back to the default fade transition. Thanks!

12 Replies

xenial-black•10mo ago

i think it should work do you have an example that does not work?

jolly-crimsonOP•10mo ago

maybe skill issue ill whip something up

xenial-black•10mo ago

not necessarily 😄

jolly-crimsonOP•10mo ago

lemme try to make minimal example rn @Manuel Schiller i have confirmed it was a skill issue, sorry for bother you 😂 i tried literally multiple times over the course of multiple days

xenial-black•10mo ago

best result here. no bug 😄 you needed my aura

jolly-crimsonOP•10mo ago

this is aura

genetic-orange•9mo ago

do you have an example of what you did? I'd love to learn

jolly-crimsonOP•9mo ago

https://stackblitz.com/edit/tanstack-router-uthwqhlv?file=src%2Fstyles.css Main changes are in the styles.css and _root files The styles.css creates the transition animation and can be modified however you like through css animations. html:active-view-transition-type(slide-left) { names the view transition, in my case 'slide-left' Then when using links or navigation in tanstack router you add the viewTransition property with the name of your transition. Show in _root.tsx

<Link
  to="/"
  activeProps={{
    className: 'font-bold',
  }}
  activeOptions={{ exact: true }}
  viewTransition={{ types: ['slide-left'] }}
>
  Home
</Link>

<Link
  to="/"
  activeProps={{
    className: 'font-bold',
  }}
  activeOptions={{ exact: true }}
  viewTransition={{ types: ['slide-left'] }}
>
  Home
</Link>

To customize which section of the page actually transitions you can modify the 'root' property

&::view-transition-old(root) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
  }
  &::view-transition-new(root) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
  }

&::view-transition-old(root) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
  }
  &::view-transition-new(root) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
  }

with a custom name and apply it to html elements with css https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name

genetic-orange•9mo ago

amazing thank you this is good stuff

xenial-black•9mo ago

@zander would be awesome if you could contribute an example to our repo as well as documentation

jolly-crimsonOP•9mo ago

will do!

xenial-black•9mo ago

also cc @Sean Cassiere

Gaming

Programming

Are ViewTransitions implemented in Link components?

Did you find this page helpful?