In Next js 13.5 react-vertical-timeline not working

[TaifurIslamAshraf]

In Next js 13.5 react-vertical-timeline not working. content not visible

[d-kunrath]

Have the same issue. It's an issue with animation. If we set VerticalTimeline's animation to false or VerticalTimelineElement's visible to true, it appears on screen.

[ananta-dev]

Same here! As @D-Kunrath has suggested, this can be fixed by adding a visible="true" attribute to VerticalTimelineElement.

In my case. using React.js/Next.js this is what the fixed code looked like:

<VerticalTimeline lineColor=''>
     {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
               <VerticalTimelineElement
                    visible={true}                       
                    contentStyle={{...

[notavacillator]

If we set VerticalTimeline's animation to false or VerticalTimelineElement's visible to true, it appears on screen.

That does make the content visible but stops the default animation of popping up VerticalTimelineElement as the component appears in the viewport.

[souravdasdip]

For "next": "13.4.8", it is working.

[ananta-dev]

The animation does not work for me either in next 13.5.2. I added animate={true} to VerticalTimelin, but this had no effect: <VerticalTimeline lineColor='' animate={true}>

For "next": "13.4.8", it is working. Hi @souravdasdip , yes for 13.4 it works but it does not work for 13.5. That's the issue.

[rohit-simbanic]

The animation does not work for me either in next 13.5.2. I added animate={true} to VerticalTimelin, but this had no effect: <VerticalTimeline lineColor='' animate={true}>

For "next": "13.4.8", it is working. Hi @souravdasdip , yes for 13.4 it works but it does not work for 13.5. That's the issue.

Yes the animation is not working @ananta-dev next 13.5.2

[spikeganush]

With next 13.5.2 is not working on local but when it's deploy I have no issue.

[cpeed]

Use inView() from react-intersection-observer const {ref, inView} = inView() In element visible={inView}and use ref to first child of element

[ananta-dev]

Use inView() from react-intersection-observer const {ref, inView} = inView() In element visible={inView}and use ref to first child of element

Does this make the animation work?

[farrukh007]

Same here! As @D-Kunrath has suggested, this can be fixed by adding a visible="true" attribute to VerticalTimelineElement.

In my case. using React.js/Next.js this is what the fixed code looked like:

<VerticalTimeline lineColor=''>
     {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
               <VerticalTimelineElement
                    visible={true}                       
                    contentStyle={{...

lovit it. thanks its working but let me know how did you find the solution?

[ananta-dev]

Hi @farrukh007 After reading @D-Kunrath's comment I looked at the documentation, here: https://stephane-monnot.github.io/react-vertical-timeline/#/

If you scroll down you will see: visible={ Boolean } #

[farrukh007]

Hi @farrukh007 After reading @D-Kunrath's comment I looked at the documentation, here: https://stephane-monnot.github.io/react-vertical-timeline/#/

If you scroll down you will see: visible={ Boolean } #

hi dear will you assist me one thing more about how may I resize the vertical timeline element?

[ananta-dev]

Hi @farrukh007 ! This is not a discord channel. It is very specific gihub issue. I would recommend you follow the documentation link I shared in my previous post and you look for style={ Object } - Add extra style to root div element. You can use that to change the appearance of the timeline element.

[diosetiad]

Actually, you can set it like this for react-vertical-timeline-component in Next.js 13.5,

import { useInView } from "react-intersection-observer";

const { ref, inView } = useInView({
    triggerOnce: true,
  });

<section ref={ref}>
  <VerticalTimeline lineColor="#e4e4e7">
        {experiences.map((experience, index) => (
          <VerticalTimelineElement
            visible={inView}
            date={experience.date}
            icon={experience.icon}
            key={index}...

in this case, I only trigger the inView callback animation once. Hopefully it helps✌🏼

[ananta-dev]

Thank you @diosetiad. That makes the animation work. That's great.

However, with your solution the whole VerticalTimeLine is treated as a single block for the triggering of the animation. The whole timeline is animated at once. There are no individual animations for each VerticalTimeElement as we would expect.

I have tried to generate individual refs for each element, even using the <InView> component instead of the useInView hook but did not succeed so far.

Do you have any idea how we may animate each VerticalTimelineElement individually, while maintaining the dynamic experiences.map structure?

[SebastienRamsay]

Here is the full solution. Ignore line 14 ( const { ref } = useSectionInView('Experience');). Need to use vissible={true} or useInViewfrom 'react-intersection-observer' to keep the animations.

'use client';
import React from 'react';
import { useSectionInView } from '@/lib/hooks';
import SectionHeading from './section-heading';
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { experiencesData } from '@/lib/data';
import { useInView } from 'react-intersection-observer';

export default function Experience() {
  const { ref } = useSectionInView('Experience');
  return (
    <section
      ref={ref}
      id="experience"
      className="mb-28 max-w-[45rem] scroll-mt-28 text-center leading-8 sm:mb-40"
    >
      <SectionHeading>My Experience</SectionHeading>
      <VerticalTimeline lineColor="">
        {experiencesData.map((item, index) => {
          const { ref, inView } = useInView({
            triggerOnce: true,
          });
          return (
            <div key={index} ref={ref} className="vertical-timeline-element">
              <VerticalTimelineElement
                contentStyle={{
                  background: '#f3f4f6',
                  boxShadow: 'none',
                  border: '1px solid rgba(0, 0, 0, 0.05)',
                  textAlign: 'left',
                  padding: '1.3rem 2rem',
                }}
                contentArrowStyle={{
                  borderRight: '0.4rem solid #9ca3af',
                }}
                visible={inView}
                date={item.date}
                icon={item.icon}
                iconStyle={{
                  background: 'white',
                  fontSize: '1.5rem',
                }}
              >
                <h3 className="font-semibold capitalize">{item.title}</h3>
                <p className="!mt-0 font-normal">{item.location}</p>
                <p className="!mt-1 !font-normal text-gray-700">
                  {item.description}
                </p>
              </VerticalTimelineElement>
            </div>
          );
        })}
      </VerticalTimeline>
    </section>
  );
}

[ananta-dev]

Great job @SebastienRamsay! It works beautifully. Would have never thought of moving the hook call inside the map callback. I have learned something from you. Thank you.

For those who would prefer the animation to replay if the user scrolls back up and then down again, one can change this:

 <VerticalTimeline lineColor="">
        {experiencesData.map((item, index) => {
          const { ref, inView } = useInView({
            triggerOnce: true,
          });
          return (

to this:

 <VerticalTimeline lineColor="">
        {experiencesData.map((item, index) => {
          const { ref, inView } = useInView({ threshold: 0 });
          return (

[ananta-dev]

Question @SebastienRamsay The solution worked locally, but when I deployed to Vercel, I got this error:

...
[06:30:04.703]    Linting and checking validity of types...
[06:30:07.064] 
[06:30:07.064] Failed to compile.
[06:30:07.064] 
[06:30:07.064] ./components/experience.tsx
[06:30:07.065] 26:45  Error: React Hook "useInView" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.  react-hooks/rules-of-hooks
[06:30:07.065] 
[06:30:07.065] info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
[06:30:07.168] Error: Command "npm run build" exited with 1

It appears eslint does not like me calling a hook from inside a callback.

Did you have this issue when deploying? What's your best way to solve it?

[ananta-dev]

Update:

I managed to get rid of the Vercel deployment eslint error by extracting the callback to a separate component, like this:

'use client'
import React from 'react'
import { useSectionInView } from '@/lib/hooks'
import SectionHeading from './sectionHeading'
import {
    VerticalTimeline,
    VerticalTimelineElement,
} from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import { experiencesData } from '@/lib/data'
import { useInView } from 'react-intersection-observer'
import { useTheme } from '@/context/themeContext'

type ExperienceElementProps = {
    theme: string
    item: {
        date: string
        icon: React.ReactNode
        title: string
        location: string
        description: string
    }
}

const ExperienceElement = ({ theme, item }: ExperienceElementProps) => {
    const { ref, inView } = useInView({ threshold: 0 })
    return (
        <div ref={ref} className='vertical-timeline-element'>
            <VerticalTimelineElement
                visible={inView}
                contentStyle={{
                    background:
                        theme === 'light'
                            ? '#f3f4f6'
                            : 'rgba(255, 255, 255, 0.05)',
                    boxShadow: 'none',
                    border: '1px solid rgba(0, 0, 0, 0.05)',
                    textAlign: 'left',
                    padding: '1.3rem 2rem',
                }}
                contentArrowStyle={{
                    borderRight:
                        theme === 'light'
                            ? '0.4rem solid #9ca3af'
                            : '0.4rem solid rgba(255, 255, 255, 0.5)',
                }}
                date={item.date}
                icon={item.icon}
                iconStyle={{
                    background:
                        theme === 'light' ? 'white' : 'rgba(29, 36, 50, 0.95)',
                    fontSize: '1.5rem',
                }}
            >
                <h3 className='font-semibold capitalize'>{item.title}</h3>
                <p className='font-normal !mt-0'>{item.location}</p>
                <p className='!mt-1 !font-normal text-gray-700 dark:text-white/75'>
                    {item.description}
                </p>
            </VerticalTimelineElement>
        </div>
    )
}

export default function Experience() {
    const { ref } = useSectionInView('Experience')
    const { theme } = useTheme()
    return (
        <section
            ref={ref}
            id='experience'
            className='scroll-mt-28 mb-28 sm:mb-40'
        >
            <SectionHeading>My Experience</SectionHeading>
            <VerticalTimeline lineColor=''>
                {experiencesData.map((item, index) => (
                    <ExperienceElement key={index} theme={theme} item={item} />
                ))}
            </VerticalTimeline>
        </section>
    )
}

Credit to this Stackoverflow answer: https://stackoverflow.com/questions/55963914/react-usecallback-hook-for-map-rendering/55963994#55963994

Unfortunately (for me) the deployed version does not replay animation when the user scrolls back up to above the timeline and then down again to bring the timeline into view for a second time. Has anyone managed to get it to work after deploying?

[SebastienRamsay]

🤦

[diosetiad]

@ananta-dev sorry for replying now, we can animate each VerticalTimelineElement individually like this : create a TimelineElement component to avoid eslint errors.

import { VerticalTimelineElement } from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { useInView } from "react-intersection-observer";

export default function TimelineElement({ item }) {
  const { ref, inView } = useInView({
    triggerOnce: true,
  });

  return (
    <div ref={ref} className="vertical-timeline-element">
      <VerticalTimelineElement
        contentStyle={{
          ...
        }}
        contentArrowStyle={{
          ...
        }}
        date={item.date}
        icon={item.icon}
        iconStyle={{
          ...
        }}
        visible={inView}
      >
        <h4 className="font-semibold">{item.title}</h4>
        <p className="!mt-0 font-normal">{item.location}</p>
        <p className="!mt-1 !font-normal text-zinc-700 dark:text-white/75">
          {item.description}
        </p>
      </VerticalTimelineElement>
    </div>
  );
}

import TimelineElement to main component.

"use client";
import { experiencesData } from "@/lib/data";
import { VerticalTimeline } from "react-vertical-timeline-component";
import TimelineElement from "./timeline-element";
export default function Experience() {
  return (
    <section
      className="my-20 flex w-full scroll-mt-28 flex-col items-center justify-center gap-10"
      id="#experience"
    >
      <VerticalTimeline lineColor="#e4e4e7">
        {experiencesData.map((item, index) => {
          return ( <TimelineElement key={index} item={item} /> );
        })}
      </VerticalTimeline>
    </section>
  );
}

now the animation definitely works and there are no eslint errors. Hopefully it helps✌🏼

[jordansbenjamin]

Update:

I managed to get rid of the Vercel deployment eslint error by extracting the callback to a separate component, like this:

'use client'
import React from 'react'
import { useSectionInView } from '@/lib/hooks'
import SectionHeading from './sectionHeading'
import {
    VerticalTimeline,
    VerticalTimelineElement,
} from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import { experiencesData } from '@/lib/data'
import { useInView } from 'react-intersection-observer'
import { useTheme } from '@/context/themeContext'

type ExperienceElementProps = {
    theme: string
    item: {
        date: string
        icon: React.ReactNode
        title: string
        location: string
        description: string
    }
}

const ExperienceElement = ({ theme, item }: ExperienceElementProps) => {
    const { ref, inView } = useInView({ threshold: 0 })
    return (
        <div ref={ref} className='vertical-timeline-element'>
            <VerticalTimelineElement
                visible={inView}
                contentStyle={{
                    background:
                        theme === 'light'
                            ? '#f3f4f6'
                            : 'rgba(255, 255, 255, 0.05)',
                    boxShadow: 'none',
                    border: '1px solid rgba(0, 0, 0, 0.05)',
                    textAlign: 'left',
                    padding: '1.3rem 2rem',
                }}
                contentArrowStyle={{
                    borderRight:
                        theme === 'light'
                            ? '0.4rem solid #9ca3af'
                            : '0.4rem solid rgba(255, 255, 255, 0.5)',
                }}
                date={item.date}
                icon={item.icon}
                iconStyle={{
                    background:
                        theme === 'light' ? 'white' : 'rgba(29, 36, 50, 0.95)',
                    fontSize: '1.5rem',
                }}
            >
                <h3 className='font-semibold capitalize'>{item.title}</h3>
                <p className='font-normal !mt-0'>{item.location}</p>
                <p className='!mt-1 !font-normal text-gray-700 dark:text-white/75'>
                    {item.description}
                </p>
            </VerticalTimelineElement>
        </div>
    )
}

export default function Experience() {
    const { ref } = useSectionInView('Experience')
    const { theme } = useTheme()
    return (
        <section
            ref={ref}
            id='experience'
            className='scroll-mt-28 mb-28 sm:mb-40'
        >
            <SectionHeading>My Experience</SectionHeading>
            <VerticalTimeline lineColor=''>
                {experiencesData.map((item, index) => (
                    <ExperienceElement key={index} theme={theme} item={item} />
                ))}
            </VerticalTimeline>
        </section>
    )
}

Credit to this Stackoverflow answer: https://stackoverflow.com/questions/55963914/react-usecallback-hook-for-map-rendering/55963994#55963994

Unfortunately (for me) the deployed version does not replay animation when the user scrolls back up to above the timeline and then down again to bring the timeline into view for a second time. Has anyone managed to get it to work after deploying?

Yeah this stumped me, using hooks has to be at the top level of the component, so extracting it into a separate component worked like a charm like the solution you found! Glad we're all sharing this with each other, helps to see other perspectives for problem solving!

[Jaival]

I am facing the same issue in Next.js 14.0.3. Is this issue in the package or Next.js??

[kolen44]

Hello everyone And I have most likely found a solution to this problem!!!!! If you use a typescript, then this comment is for you! Since a javascript is used in the react-vertical-timeline-component folder, and you import a javascript into a typescript, you naturally get an error! Therefore, either you need to recreate the project and use the javascript there, or use other typescript-compatible libraries!

[madhusportIT]

"use client";

import React from "react"; import SectionHeading from "./section-heading"; import { VerticalTimeline, VerticalTimelineElement, } from "react-vertical-timeline-component"; import "react-vertical-timeline-component/style.min.css"; import { experiencesData } from "@/lib/data"; import { useSectionInView } from "@/lib/hooks"; import { useTheme } from "@/context/theme-context";

export default function Experience() { const { ref } = useSectionInView("Experience"); const { theme } = useTheme();

return (

My experience {experiencesData.map((item, index) => { return (

{item.title}

{item.location}

{item.description}

); })}

); }

[madhusportIT]

The content inside VerticalTimelineElement is not reflecting

[madhusportIT]

https://ricardo-portfolio-site.vercel.app/ Check this out it's working

[satyendramourya]

With next 13.5.2 is not working on local but when it's deploy I have no issue.

same for me.

[maltin1234]

I have next 13.5 but i get this problem:

node_modules\react-intersection-observer\react-intersection-observer.js

Caused by: The system cannot find the file specified. (os error 2)

[n1co02]

you could just return the inView in your custom Hook return { ref, inView, } modify the const { ref} = useSectionInView('Experience') to const { ref, inView } = useSectionInView('Experience') and set your visible to inView

[gorkemarpaci]

you could just return the inView in your custom Hook return { ref, inView, } modify the const { ref} = useSectionInView('Experience') to const { ref, inView } = useSectionInView('Experience') and set your visible to inView

yes you are right, but this animate the component as a whole since you have one and same inView prop for the all timeline elements. In order to animate timeline elements one by one, you need to follow @diosetiad recommendation. Its up to you how you'd like to animate

[n1co02]

you could just return the inView in your custom Hook return { ref, inView, } modify the const { ref} = useSectionInView('Experience') to const { ref, inView } = useSectionInView('Experience') and set your visible to inView

yes you are right, but this animate the component as a whole since you have one and same inView prop for the all timeline elements. In order to animate timeline elements one by one, you need to follow @diosetiad recommendation. Its up to you how you'd like to animate

For that I did const [isInView, setIsInView] = useState(false) useEffect(() => { if (inView) { setIsInView(true) } }, [inView])

And set visible=isInView because I faced the same problem.

[felipe-muner]

It worked for me even with next 14:

// package.json
{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-email/components": "^0.0.7",
    "@react-email/tailwind": "^0.0.8",
    "@types/node": "20.3.2",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "autoprefixer": "10.4.14",
    "clsx": "^1.2.1",
    "eslint": "8.43.0",
    "eslint-config-next": "13.4.7",
    "framer-motion": "^10.12.17",
    "next": "14.1.0",
    "postcss": "8.4.24",
    "react": "^18",
    "react-dom": "^18",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^4.10.1",
    "react-intersection-observer": "^9.5.2",
    "react-vertical-timeline-component": "^3.6.0",
    "resend": "^0.16.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.5"
  },
  "devDependencies": {
    "@types/react-vertical-timeline-component": "^3.3.3"
  }
}

// vertical timeline component

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { experiencesData } from "@/lib/data";
import { useTheme } from "@/context/theme-context";
import { useInView } from "react-intersection-observer";

export default function Experience() {
  const { theme } = useTheme();
  const { ref, inView } = useInView({
    triggerOnce: true,
  });

  return (
    <section id="experience" ref={ref} className="scroll-mt-28 mb-28 sm:mb-40">
      <SectionHeading>My experience</SectionHeading>
      <VerticalTimeline lineColor="">
        {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              visible={inView}
              contentStyle={{
                background:
                  theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 0, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight:
                  theme === "light"
                    ? "0.4rem solid #9ca3af"
                    : "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background:
                  theme === "light" ? "white" : "rgba(255, 255, 255, 0.15)",
                fontSize: "1.5rem",
              }}
            >
              <h3 className="font-semibold capitalize">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </section>
  );
}

[alvaro-escalante]

It worked for me even with next 14:

"use client";

import React from "react"; import SectionHeading from "./section-heading"; import { VerticalTimeline, VerticalTimelineElement, } from "react-vertical-timeline-component"; import "react-vertical-timeline-component/style.min.css"; import { experiencesData } from "@/lib/data"; import { useTheme } from "@/context/theme-context"; import { useInView } from "react-intersection-observer";

export default function Experience() { const { theme } = useTheme(); const { ref, inView } = useInView({ triggerOnce: true, });

return (

My experience {experiencesData.map((item, index) => (

{item.title}

{item.location}

{item.description}

))}

); } ``` You are not using `useSectionInView`, if you did, it would not work to `setActiveSection` as you scroll, your section ref does nothing on your code

[JulietaDallaPozza]

Same here! As @d-kunrath has suggested, this can be fixed by adding a visible="true" attribute to VerticalTimelineElement.

In my case. using React.js/Next.js this is what the fixed code looked like:

<VerticalTimeline lineColor=''>
     {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
               <VerticalTimelineElement
                    visible={true}                       
                    contentStyle={{...

Thank you!

[krishnagptamcs]

visible={inView}

Thanks @SebastienRamsay , this works well , and its is easy to impliment with next ! good job