#React-Vertical-Timeline-Component problems

1 messages · Page 1 of 1 (latest)

rain meteor
#

So I want the timeline to animate in when i scroll it inview, but instead it animates straight away on load which isn't what i want. How do I make it start animating once i scroll it in view

"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";

export default function Experience() {
  const { ref } = useSectionInView("Experience");
  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={true}
              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",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background: "white",
                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">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </section>
  );
}
shy bayBOT
# rain meteor So I want the timeline to animate in when i scroll it inview, but instead it ani...

Detected code, here are some useful tools:

Formatted code 
"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";

exportdefault function Experience() {
  const {
    ref}
   = useSectionInView("Experience");
  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 = {
      true}
    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", }
    }
    date = {
      item.date}
    icon = {
      item.icon}
    iconStyle = {
        {
        background : "white", 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" > {
      item.description}
     <  / p >  <  / VerticalTimelineElement >  <  / React.Fragment > )) }
   <  / VerticalTimeline >  <  / section > );
}
#

<@&987246964494204979> please have a look, thanks.

rain meteor
#

it's also really werid since the tutorial i'm watching has the exact same code, but his is working

#

i also compared the code with his github repo and it's exactly the same so im suspecting it's version issues, i read the docs and i also couldnt find any info about it

rain meteor
#

well i figured out

#

here’s the github issue if u somehow ran into this very specific problem

strange tide
#

woah

#

ive never used github

#

also cool

rain meteor
#

damn