Next.js Discord

Discord Forum

How to achieve same effect as Vercel uses on their dashboard - animation

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
I am sure you are familiar with this. But how do I animate that when i click on let say 6th button from first one (so first one was active) this cool transition happens where bottom line goes trough the links up to the 6th one which becomes active one. If anyone needs video or something I can provide it
Answered by Anay-208
Video recording(just noticed that there was something wrong with the video caused due to video recording software)
View full answer

29 Replies

Original message was deleted
B33fb0n3
help forum exists to get help. So it's also for things like stripe or other things, that are not really related to nextjs.
As far as I understood, he is providing a yt link(video) to create this animation
B33fb0n3
he wants to know how the animation works and we are here to provide this information. Whats the problem?
Anay-208
Read the last line
If anyone needs video or something I can provide it
At start he's asking for help, at end is trying to help
@Anay-208 Read the last line > If anyone needs video or something I can provide it At start he's asking for help, at end is trying to help
joulev
they meant "if anyone is confused what the question is, i can provide a screen recording of the animation"
Anay-208
I guess I'm confused
joulev
yes you are
@Anay-208 As far as I understood, he is providing a yt link(video) to create this animation
RhinelanderOP
Nah I can just screen record the effect so you can tell me how to do it. I have no idea how to do that
My bad for not being more descriptive
@Rhinelander Great thanks
Anay-208
Hey, I've built it. I'll send you the live site link once github pages has finished building!
just click on any item once and animation will start
@Anay-208 https://github.com/anay-208/animation/tree/main/vercel-navbar
B33fb0n3
I guess he meant the animation via the router switch
@B33fb0n3 I guess he meant the animation via the router switch
Anay-208
@Rhinelander if that’s so, kindly ping me
RhinelanderOP
I want to achieve this effect. On click i go from /parent/child1 to /parent/child2
RhinelanderOP
Would appreciate it as I am interested in how this works. But you are not in a hurry so take your time man.
When you send it i will mark it as solution so we can close this post
Anay-208
@Rhinelander done
Anay-208
Video recording(just noticed that there was something wrong with the video caused due to video recording software)
Answer
Anay-208
file structure
a/page.tsx && b/page.tsx(Only A & B is the diff)
export default function Page() {

  return (
    <div style={{color: "white"}}>
        Page A
    </div>
  );
}


Layout.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Navbar from "./navbar";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

Navbar.tsx:
"use client";
import "./styles.css"
import { useRef, useState } from "react";
import Link from "next/link";
export default function Page() {
  const navbarRef = useRef(null)
  const [transform, setTransform] = useState("translateX(0px) scaleX(1)")
    function onClick(event){
        // Calculate the scaleX and translateX values
        const scaleX = event.target.offsetWidth / navbarRef.current.offsetWidth;
        const translateX = event.target.offsetLeft;

        // Animate the line using scaleX and translateX
        setTransform(`translateX(${translateX}px) scaleX(${scaleX})`)
    }
  return (
    <div className="navbar" ref={navbarRef}>
      <Link href={"/vercel-navbar/a"} onClick={onClick}>Route 1</Link>
      <Link href={"/vercel-navbar/b"} onClick={onClick}>Route 2</Link>

      <div className="line" style={{
        transform
      }}></div>
    </div>
  );
}
Just fix the ts types
RhinelanderOP
THANK YOUU!!!