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'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'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'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>
);
}