React-vertical-timeline is not showing. The output HTML keeps the elements hidden with "is-hidden" class

Question

I am trying to implement a vertical timeline on my project. But its not showing on the generated HTML code. When I tried to inspect it, I see that the classes are generated to be hidden with "is-hidden". I think it might be having issues with intersection observer.

timeline.js file

"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 { timelineData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";

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

  return (
    <section
      id="timeline"
      ref={ref}
      className="scroll-mt-28 mb-28 sm:mb-40 text-center"
    >
      <SectionHeading>Timeline</SectionHeading>
      <VerticalTimeline lineColor="">
        {timelineData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              contentStyle={{
                background: "rgba(255, 0, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 230, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background: "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>
  );
}

data.js file

  {
    index_number: 1,
    title: "Bachelor's Degree",
    location: "Bangladesh",
    description:
      "I completed my Bachelor's Degree in Computer Science and Software Engineering at the American International University-Bangladesh.",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "2-September-1994",
    icon: <BiSolidGraduation />,
  },
  {
    index_number: 1,
    title: "Bachelor's Degree",
    location: "Bangladesh",
    description:
      "I completed my Bachelor's Degree in Computer Science and Softwarelre asjdajs.",
    tags: ["CSSE", "Bachelors", "Graduation"],
    date: "11-September-2021",
    icon: <BiSolidGraduation />,
  },```

Answer 1

Same issue here, they get assigned an is-hidden CSS class by default.

I've added a visible={true} to the VerticalTimeline to fix the issue temporarily, but I think by default it should be set to true.

Answer 2

please go to VerticalTimelineElement and add visible={true}

Answer 3

Animation is the problem. I guess VerticalTimelineElement starts as hidden first and then changes status, but somehow that signal doesn't get detected or so.

To solve this for now you simply need to disable animation <VerticalTimeline animate={false}>

I hope they fix this soon. I really like the animation.