Search the Community

How can I create this same animation with gsap and next js?

Hello everyone, I'm trying to create a simple text marquee. But in my case, the marquee is just getting repeated. But I was trying to make an infinite marquee.

The animtion should be start on when image top hit on viewport bottom but when I enabled markers then I see gsap taking image bottom as top so it's making problem like it's starting too late. 'use client' import Image from "next/image"; import "./process.scss"; import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; import StartIcon from '@mui/icons-material/Start'; import {useRef, useEffect} from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function ProcessSection() { const root1 = useRef(); const root2 = useRef(); const root3 = useRef(); const processArticleImage1 = useRef(); const processArticleImage2 = useRef(); const processArticleImage3 = useRef(); const processArticleHeading1 = useRef(); const processArticleHeading2 = useRef(); const processArticleHeading3 = useRef(); const process1Desc1 = useRef(); const process1Desc2 = useRef(); const process2Desc1 = useRef(); const process2Desc2 = useRef(); const process3Desc1 = useRef(); const process3Desc2 = useRef(); function animateElement({ triggerElement, scrub = .2, sx, x, opacity = 1, }) { gsap.fromTo( triggerElement, { x: sx, opacity: 0, }, { scrollTrigger: { trigger: triggerElement, start: 'top bottom', end: 'center center', scrub: true, invalidateOnRefresh: true, markers: true }, x: x, opacity: opacity, } ); } useEffect(()=>{ animateElement({ triggerElement: '.processArticleImage1', sx: -300, x: 0, }); },[]) return ( <section className="processSection" id="ourprocess" > <div className="bodyContainer"> <div className="processSectionWrapper" > <div className="processSectionHeading"> <h1>How We Work!</h1> </div> <div className="processWrapper container" > <div className="process" ref={root1}> <article className='singleProcess' > <Image ref={processArticleImage1} className="processArticleImage1" src="/process/meeting.svg" width={50} height={50} alt="how dsyncro work"/> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> </article> </div> <div className="process"> <article> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> <Image src="/process/development.svg" width={50} height={50} alt='How dsyncro development'/> </article> </div> <div className="process"> <article> <Image src="/process/meeting.svg" width={50} height={50} alt="how dsyncro work"/> <div className="processContent"> <div className="contentHeading"> <h2>Project Discovery and Planning</h2> </div> <div className="contentBody"> <p><span>Embark on a Creative Odyssey:</span> Dive deep into the client&apos;s vision through spirited initial meetings. Uncover the essence of their project goals, painting a vivid picture of the journey ahead.</p> <p><span>Blueprints to Brilliance:</span> Bring plans to life! Navigate the digital landscape with meticulous project planning, where wireframes and mockups sculpt the first strokes of your masterpiece..</p> </div> </div> </article> </div> </div> <div className="processSectoionFooter"> <span className="CTA-Qoute"> Get a Qoute <StartIcon /> </span> <span className="CTA_Schedule"> <CalendarMonthIcon /> Schedule a Call</span> </div> </div> </div> </section> ); }