Jump to content
Search Community

mukeshKumarSardiwal1997

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by mukeshKumarSardiwal1997

  1. 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

  2. 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>
×
×
  • Create New...