Kevin Powell - Community•7mo ago

animation-timeline-view header from kevin's video

I saw kevin's video about how we can customize the header after certain point when scrolling. I tried the same effect but the header stops sticking after a certain point. Code 👇

7 Replies

MelodiumOP•7mo ago

<header class="navbar">
    <div class="logo">
      <h1 class="title">MeloDum</h1>
      <span class="sub">Developer</span>
    </div>
    <div class="nav">
      <a href="#home" class="nav-item">Home</a>
      <a href="#about" class="nav-item">About</a>
      <a href="#projects" class="nav-item">Projects</a>
      <a href="#contact" class="nav-item">Contact</a>
      <button><span onclick="changeTheme()" class="material-icons nav-item">light_mode</span></button>
    </div>
  </header>
  <main>
    <!-- Main Content -->
  </main>

<header class="navbar">
    <div class="logo">
      <h1 class="title">MeloDum</h1>
      <span class="sub">Developer</span>
    </div>
    <div class="nav">
      <a href="#home" class="nav-item">Home</a>
      <a href="#about" class="nav-item">About</a>
      <a href="#projects" class="nav-item">Projects</a>
      <a href="#contact" class="nav-item">Contact</a>
      <button><span onclick="changeTheme()" class="material-icons nav-item">light_mode</span></button>
    </div>
  </header>
  <main>
    <!-- Main Content -->
  </main>

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-secondary);
  padding: .5rem var(--gutter);
  margin-inline: auto;
  margin-block: 0rem;
  position: sticky;
  width: auto;
  z-index: 1000;
  
  
  @supports (animation-timeline: view()) {

    animation: nav linear forwards;
    animation-timeline: view();
    animation-range-start: 105vh;
    animation-range-end: calc(105vh + 100px);

    top: -5rem;
    backdrop-filter: blur(5px);
  }

  /* -- OTHER STYLING NOT RELATED TO PROBLEM -- */
  .logo {
    display: var(--logo-view);
    align-items: center;
    gap: 1rem;
  }

  .nav {
    display: flex;
    gap: var(--li-gap);
    align-items: center;

    .nav-item {
      font-size: var(--li-fontsize);
      transition: color 150ms ease-out;
    }

    .nav-item:hover,
    .nav-item.active {
      color: var(--clr-primary);
    }

  /* -- END OF OTHER STYLING */
  }
}

@keyframes nav {
  0%, 100% {
    --logo-view: none;
    --li-gap: 5rem;
    --li-fontsize: 18px;
    width: fit-content;
  }
  
  100% {
    border-radius: 100vmin;
    top: 1rem;
    background-color: rgba(0, 0, 0, .25);
    border: 5px solid var(--bg-secondary);
  }
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-secondary);
  padding: .5rem var(--gutter);
  margin-inline: auto;
  margin-block: 0rem;
  position: sticky;
  width: auto;
  z-index: 1000;
  
  
  @supports (animation-timeline: view()) {

    animation: nav linear forwards;
    animation-timeline: view();
    animation-range-start: 105vh;
    animation-range-end: calc(105vh + 100px);

    top: -5rem;
    backdrop-filter: blur(5px);
  }

  /* -- OTHER STYLING NOT RELATED TO PROBLEM -- */
  .logo {
    display: var(--logo-view);
    align-items: center;
    gap: 1rem;
  }

  .nav {
    display: flex;
    gap: var(--li-gap);
    align-items: center;

    .nav-item {
      font-size: var(--li-fontsize);
      transition: color 150ms ease-out;
    }

    .nav-item:hover,
    .nav-item.active {
      color: var(--clr-primary);
    }

  /* -- END OF OTHER STYLING */
  }
}

@keyframes nav {
  0%, 100% {
    --logo-view: none;
    --li-gap: 5rem;
    --li-fontsize: 18px;
    width: fit-content;
  }
  
  100% {
    border-radius: 100vmin;
    top: 1rem;
    background-color: rgba(0, 0, 0, .25);
    border: 5px solid var(--bg-secondary);
  }
}

Jochem•7mo ago

I'd recommend signing up for a codepen account (they're free, and support social logins iirc) and posting it in there so that it's easy for people to see in their own browsers how it's broken, it really helps to get answers

MelodiumOP•7mo ago

yea, just now created it after hearing your advice in chit-chat https://codepen.io/ShiroCode69/pen/rNbELQe

Jochem•7mo ago

I'll try to look later, though my night's pretty full. Hopefully someone else gets to it soon 🙂

MelodiumOP•7mo ago

(this is like some simple portfiolio design im making to try out new html-css things with it, please dont mind whatever is in it) well, thanks anyways :)

Chris Bolson•7mo ago

You have your body height set to 100%. Try changing this to: min-height: 100svh;

MelodiumOP•7mo ago

ok, i'll try Thank You So Much :D It works as expected!!!! [ I'm closing this thread for now, thank you everyone who helped me ]

Gaming

Programming

animation-timeline-view header from kevin's video