can someone please provide a solution to this problem. It doesn’t prevent my web application from running at start but after sometime it just abruptly pops up on the screen.
The error is due to this bit of code.
const animationProjectsCount = () => {
animate(0, 30, {
duration: 1,
onUpdate: (v) => (projectCount.current.textContent = v.toFixed())
})
}
The entire component code:
import React, { useRef } from 'react';
import { animate, motion } from "framer-motion";
import Timeline from './Timeline';
const Home = () => {
const projectCount = useRef(null);
// var element = projectCount.current;
const animationProjectsCount = () => {
animate(0, 30, {
duration: 1,
onUpdate: (v) => (projectCount.current.textContent = v.toFixed())
})
}
return (
<div id='about'>
<div className="abtSections">
<div className="abtLeft">
<h1 className='abtHeader'>About</h1>
<p>As I strive to achieve my goal of becoming a full-stack developer, I have acquired valuable experience through the completion of various projects at a beginner level, and my accumalated years of programming and project work. Moreover, I possess a notable self aptitude for self-directed learning and am able to apply myself for acquiring new skills at a constrained time frame.</p>
</div>
<div className="abtRight">
<Timeline />
</div>
<div style={{ clear: "both" }}></div>
</div>
<div className='projectsDone'>
<p className='number'>
+<motion.span ref={projectCount} whileInView={animationProjectsCount}></motion.span>
</p>
<span className='done'>Projects Done</span>
</div>
</div>
)
}
export default Home
Any help would be genuinely appreciated!!