In Next js 13.5 react-vertical-timeline not working #166

TaifurIslamAshraf · 2023-09-22T06:14:02Z

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

d-kunrath · 2023-09-22T20:21:47Z

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 · 2023-09-23T05:26:26Z

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 · 2023-09-23T20:37:00Z

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 · 2023-09-25T17:37:44Z

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

ananta-dev · 2023-09-26T04:40:07Z

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 · 2023-09-29T10:10:34Z

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 · 2023-09-29T13:29:03Z

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

cpeed · 2023-10-02T00:11:41Z

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

ananta-dev · 2023-10-02T08:32:22Z

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 · 2023-10-02T20:21:38Z

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 · 2023-10-03T11:34:14Z

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 · 2023-10-04T14:10:47Z

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 · 2023-10-04T19:28:05Z

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 · 2023-10-05T09:59:57Z

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 · 2023-10-06T05:47:31Z

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 · 2023-10-08T20:17:28Z

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 · 2023-10-09T05:23:58Z

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 · 2023-10-09T05:37:21Z

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 · 2023-10-09T05:55:01Z

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 · 2023-10-09T06:22:06Z

🤦

diosetiad · 2023-10-09T06:25:14Z

@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 · 2023-10-29T21:40:07Z

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 · 2023-11-23T22:19:30Z

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

kolen44 · 2023-12-08T17:24:35Z

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 · 2023-12-29T12:28:09Z

"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 (
<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",
}}
>

{item.title}

{item.location}

{item.description}

</React.Fragment>
);
})}

);
}

madhusportIT · 2023-12-29T12:28:41Z

The content inside VerticalTimelineElement is not reflecting

madhusportIT · 2023-12-29T21:04:06Z

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

satyendramourya · 2024-01-16T06:45:16Z

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

same for me.

maltin1234 · 2024-01-30T21:47:30Z

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 · 2024-02-11T10:06:28Z

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 · 2024-02-12T08:03:32Z

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 · 2024-02-12T08:40:59Z

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 · 2024-02-17T10:31:38Z

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>
  );
}

…ion timeline now works

alvaro-escalante · 2024-04-22T01:21:57Z

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) => (
<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",
}}
>

{item.title}

{item.location}

{item.description}

</React.Fragment>
))}

);
}

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

using react-vertical-timeline-component library note: stephane-monnot/react-vertical-timeline#166 Had to set visible={true}, thus no animation

JulietaDallaPozza · 2024-05-17T09:13:28Z

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 · 2024-06-10T11:03:14Z

visible={inView}

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

everybodyloveshaggis added a commit to everybodyloveshaggis/cv-site-nextjs that referenced this issue Apr 10, 2024

thanks to stephane-monnot/react-vertical-timeline#166 (comment) solut…

b84527c

…ion timeline now works

0gw0 added a commit to 0gw0/Portfolio-website that referenced this issue Apr 29, 2024

Add experience section

ea78194

using react-vertical-timeline-component library note: stephane-monnot/react-vertical-timeline#166 Had to set visible={true}, thus no animation

In Next js 13.5 react-vertical-timeline not working #166

In Next js 13.5 react-vertical-timeline not working #166

Comments

TaifurIslamAshraf commented Sep 22, 2023

d-kunrath commented Sep 22, 2023 • edited Loading

ananta-dev commented Sep 23, 2023 • edited Loading

notavacillator commented Sep 23, 2023 • edited Loading

souravdasdip commented Sep 25, 2023

ananta-dev commented Sep 26, 2023

rohit-simbanic commented Sep 29, 2023

spikeganush commented Sep 29, 2023

cpeed commented Oct 2, 2023 • edited Loading

ananta-dev commented Oct 2, 2023

farrukh007 commented Oct 2, 2023

ananta-dev commented Oct 3, 2023 • edited Loading

farrukh007 commented Oct 4, 2023

ananta-dev commented Oct 4, 2023

diosetiad commented Oct 5, 2023

ananta-dev commented Oct 6, 2023 • edited Loading

SebastienRamsay commented Oct 8, 2023 • edited Loading

ananta-dev commented Oct 9, 2023

ananta-dev commented Oct 9, 2023

ananta-dev commented Oct 9, 2023 • edited Loading

SebastienRamsay commented Oct 9, 2023

diosetiad commented Oct 9, 2023

jordansbenjamin commented Oct 29, 2023

Jaival commented Nov 23, 2023 • edited Loading

kolen44 commented Dec 8, 2023

madhusportIT commented Dec 29, 2023

{item.title}

madhusportIT commented Dec 29, 2023

madhusportIT commented Dec 29, 2023

satyendramourya commented Jan 16, 2024

maltin1234 commented Jan 30, 2024

n1co02 commented Feb 11, 2024

gorkemarpaci commented Feb 12, 2024 • edited Loading

n1co02 commented Feb 12, 2024

felipe-muner commented Feb 17, 2024 • edited Loading

alvaro-escalante commented Apr 22, 2024 • edited Loading

{item.title}

JulietaDallaPozza commented May 17, 2024

krishnagptamcs commented Jun 10, 2024

d-kunrath commented Sep 22, 2023 •

edited

Loading

ananta-dev commented Sep 23, 2023 •

edited

Loading

notavacillator commented Sep 23, 2023 •

edited

Loading

cpeed commented Oct 2, 2023 •

edited

Loading

ananta-dev commented Oct 3, 2023 •

edited

Loading

ananta-dev commented Oct 6, 2023 •

edited

Loading

SebastienRamsay commented Oct 8, 2023 •

edited

Loading

ananta-dev commented Oct 9, 2023 •

edited

Loading

Jaival commented Nov 23, 2023 •

edited

Loading

gorkemarpaci commented Feb 12, 2024 •

edited

Loading

felipe-muner commented Feb 17, 2024 •

edited

Loading

alvaro-escalante commented Apr 22, 2024 •

edited

Loading