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

[mukeshKumarSardiwal1997]

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>

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

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!

[mukeshKumarSardiwal1997]

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

[Rodrigo]

Sorry I don't understand what you mean with this:

11 hours ago, mukeshKumarSardiwal1997 said:

As u see my start point disturb as i navigate to other page that the main problem

As I mentioned before a code snippet or a video doesn't really tell us what the problem is. GSAP Helper already pointed you to our starter templates on Stackblitz for React and Next:

• React (please read this article!)
• Next

Also please create a demo that is as simple as possible, don't create an exact copy of your demo and add a description of your issue as clear as possible in order to understand what the problem is.

 

Happy Tweening!