mukeshKumarSardiwal1997

As u see my start point disturb as i navigate to other page that the main problem any solution u know attachment add as video ?? function SlideCards({ data }) { const tElem = useRef(null); useGSAP(() => { const rwd = gsap.timeline({ scrollTrigger: { trigger: ".s-block", pin: true, pinSpacing:true, // pinnedContainer: ".rwd-area", markers: true, start: "top 15%", end: "bottom+=2000 top", scrub: 2, pinReparent:true, onRefresh: (e) => { console.log('erefresh', e); }, }, }); rwd.fromTo(".rwd-box:nth-child(2)", { xPercent: 93 }, { xPercent: 7 }); rwd.fromTo(".rwd-box:nth-child(3)", { xPercent: 100 }, { xPercent: 14 }); }); const rewardContainer = useRef(); const Ctext = (str, sClass, sText = ["yore", "Yore"]) => { let sT = str.includes(sText[0]) ? sText[0] : str.includes(sText[1]) ? sText[1] : false; if (sT) { let spD = str.split(sT); return ( <p> {spD[0]} <span className={sClass}>{sT}</span> {spD[1]} </p> ); } else return <p>{str}</p>; }; return ( <div ref={tElem} > <div className="s-block" > <div className="container" > <div className="rwd-area" > {data.map((card, ind) => { return ( <div className="rwd-box absolute" key={card} > <div className="rd-titl "> <h6>{card[0]}</h6> </div> <div className="d-lg-flex align-items-center"> <div className="rd-img"> <img src={card[3]} className="img-fluid animated bobo" alt="" /> </div> <div className="rd-cont"> <h4>{card[1]}</h4> {Ctext(card[2], "blue-tx")} <a className="btn-default" href={card[4]}> Learn more </a> </div> </div> </div> ); })} </div> </div> </div> </div> ); } recording (1).mkv

useGSAP(() => { gsap.registerPlugin(ScrollTrigger) const rwd = gsap.timeline({ scrollTrigger: { trigger: ".rewardCard .s-block", pin: ".rewardCard .s-block", // pinSpacing:true, // pinnedContainer: ".s-block", markers: true, start: "top top", end: "bottom+=2000 top", scrub: 2, pinReparent:true, onRefresh: (e) => { console.log('erefresh', e); }, }, }); rwd.fromTo(".rwd-box:nth-child(2)", { xPercent: 93 }, { xPercent: 7 }); rwd.fromTo(".rwd-box:nth-child(3)", { xPercent: 100 }, { xPercent: 14 }); return () => { // console.log(`rwd==>`, rwd.vars.scrollTrigger); rwd.vars.scrollTrigger.onRefresh() ScrollTrigger.revert(); }; }); <div className="rewardCard"> <div className="s-block" > <div className="container" > <div className="rwd-area" > {data.map((card, ind) => { return ( <div className="rwd-box absolute" key={card} > <div className="rd-titl "> <h6>{card[0]}</h6> </div> <div className="d-lg-flex align-items-center"> <div className="rd-img"> <img src={card[3]} className="img-fluid animated bobo" alt="" /> </div> <div className="rd-cont"> <h4>{card[1]}</h4> {Ctext(card[2], "blue-tx")} <a className="btn-default" href={card[4]}> Learn more </a> </div> </div> </div> ); })} </div> </div> </div> </div>