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 ( <section id="experience" ref={ref} className="scroll-mt-28 mb-28 sm:mb-40"> <SectionHeading>My experience</SectionHeading> <VerticalTimeline lineColor=""> {experiencesData.map((item, index) => { return ( <React.Fragment key={index}> <VerticalTimelineElement 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} <p className="font-normal !mt-0">{item.location}

<p className="!mt-1 !font-normal text-gray-700 dark:text-white/75"> {item.description} </VerticalTimelineElement> </React.Fragment> ); })} </VerticalTimeline> ); }

[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