like-gold

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

deep-jade•7mo ago

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

like-goldOP•7mo ago

maybe skill issue ill whip something up

deep-jade•7mo ago

not necessarily 😄

like-goldOP•7mo 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

deep-jade•7mo ago

best result here. no bug 😄 you needed my aura

like-goldOP•7mo ago

this is aura

ambitious-aqua•7mo ago

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

like-goldOP•7mo 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

ambitious-aqua•7mo ago

amazing thank you this is good stuff

deep-jade•7mo ago

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

like-goldOP•7mo ago

will do!

deep-jade•7mo ago

also cc @Sean Cassiere

Gaming

Programming

Are ViewTransitions implemented in Link components?

Did you find this page helpful?