I'm having trouble figuring out how to pause/start an animation using GSAP in Nextjs. Specifically, I can't seem to work with a tl.current outside the useEffect hook within this component. My goal is that when I click on the first .imgWrapper element, I want the tl.current to toggle and either pause or start the animation. However, despite my efforts, I haven't been able to make it work.
export const Projects = () => {
const projects = useRef();
const projectTitle = useRef(null);
const tl = useRef();
const q = gsap.utils.selector(projects);
useEffect(() => {
tl.current = gsap
.timeline()
.from(q(".singleProject:nth-child(2)"), {
y: 2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
paused: false,
})
.to(q(".singleProject:nth-child(2)"), {
y: -2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
paused: false,
});
tl.current = gsap
.timeline()
.from(q(".singleProject:nth-child(3)"), {
y: 2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
delay: 1,
})
.to(q(".singleProject:nth-child(3)"), {
y: -2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
delay: 1,
});
tl.current = gsap
.timeline()
.from(q(".singleProject:nth-child(4)"), {
y: 2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
delay: 2,
})
.to(q(".singleProject:nth-child(4)"), {
y: -2000,
ease: Linear.easeNone,
opacity: 1,
duration: 20,
repeat: -1,
delay: 2,
});
}, []);
const [animate_1, setAnimate_1] = useState(false);
const [animate_2, setAnimate_2] = useState(false);
const [animate_3, setAnimate_3] = useState(false);
return (
<section
ref={projects}
id="projects"
className={`${animate_1 && "animated_1"} ${animate_2 && "animated_2"} ${animate_3 && "animated_3"} w_100 h_100vh flex flexColumn flexAlignCenter flexCenter p4em`}
>
<div className="projectsLoading flex flexCenter flexAlignCenter w_100 h_100">
<h2>LOADING PROJECTS</h2>
</div>
<div className={`singleProject w_100 flex flexStart`}>
<div className="imgWrapper" onClick={() => some code}>
<img src={"https://www.aimanalmureish.com/img/lego.jpg"} />
</div>
</div>
<div className="singleProject w_100 flex flexEnd">
<div className="imgWrapper">
<img
onClick={() => {
setAnimate_2(!animate_2);
}}
src={"https://www.aimanalmureish.com/img/jordan.png"}
/>
</div>
</div>
<div className="singleProject w_100 flex flexStart">
<div className="imgWrapper">
<img
onClick={() => setAnimate_3(!animate_3)}
src={"https://www.aimanalmureish.com/img/ferrari.png"}
/>
</div>
</div>
</section>
);
};After console logging tl.current.pause(), this is what shows up in the console https://i.stack.imgur.com/xo0LR.png.
Any assistance would be greatly appreciated. Thank you!