[My animation not work prefect as i refresh that time its run smooth but when i navigate between page and come back from another page that start marker is shift upward]

10 hours ago, Rodrigo said:

Hi @mukeshKumarSardiwal1997 and welcome to the GSAP Forums!

 

Besides echoing the need for a minimal demo, there are a few things to note about your snippet.

 

When using our useGSAP hook there is no need for manual cleanup of your GSAP/ScrollTrigger instances, the hook does that for you, so there is no need for this:

useGSAP(() => {
  const tl = gsap.timeline.to(element, {
    scrollTrigger: {},
  });
  
  return () => {
    ScrollTrigger.revert();
  };
});

Finally the onRefresh is a callback that works on the config object, but that can't be invoked directly like this:

 rwd.vars.scrollTrigger.onRefresh()

You should be getting an error indicating that onRefresh is not a function. If you want to refresh a specific ScrollTrigger instance just do this:

 rwd.vars.scrollTrigger.refresh();

https://gsap.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

Hopefully this helps.

Happy Tweening!

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

[My animation not work prefect as i refresh that time its run smooth but when i navigate between page and come back from another page that start marker is shift upward]

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>