Where is this slide transition coming from

I have this navbar on my site and I want it to slide in just like in the video but I couldn't understand how is it working, I need to know which property makes this so I can only add transition to that property and not to background color. I exaggerated the transition duration to show what I mean.

I'm writing css version of important parts for those who don't know tailwindcss.

Before scrolling the page navbar has these properties.

position: relative;
transition: all;
top: 0px;
z-index: 30;

position: relative;
transition: all;
top: 0px;
z-index: 30;

After scrolling:

position: sticky;
transition: all;
top: 0px;
z-index: 30;

position: sticky;
transition: all;
top: 0px;
z-index: 30;

My Navbar:

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

KP-C

Kevin Powell - Community•3y ago

serkan

Where is this slide transition coming from

position: relative;
transition: all;
top: 0px;
z-index: 30;

position: relative;
transition: all;
top: 0px;
z-index: 30;

After scrolling:

position: sticky;
transition: all;
top: 0px;
z-index: 30;

position: sticky;
transition: all;
top: 0px;
z-index: 30;

My Navbar:

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

Where is this slide transition coming from

Similar Threads

Where is this slide transition coming from

Similar Threads

Similar Threads

Similar Threads