Kevin Powell - CommunityKP-C
Kevin Powell - Community•11mo ago•
23 replies
Tok124 (CSS Nerd)

view-transition exclude navbar issue

Hey, i am playing around with view-transition in CSS and i cannot really figure out this problem, when i use view-transition-name: nav; on my nav selector. nothing is being animated anymore when i click my links. But works just fine if i comment out this line...

This is the code i have
@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 1s;
}

::view-transition-old(root) {
  animation-name:slide-out;
}

::view-transition-new(root) {
  animation-name:slide-in;
}

@keyframes slide-in {
  from {
    translate:0 -100vh;
  }
}
@keyframes slide-out {
  to {
    translate:-100vw 0;
  }
}

nav {
  view-transition-name: nav;
}

Here is a link to the website
https://000704893.deployed.codepen.website/

It worked just fine when kevin used it in his video but it does not work for me, i guess this must have been changed in some way since he made that video about view-transition?
Was this page helpful?