Issue in syncing scroll trigger and onClick function

[RADNM]

Hey Guys is there any way where I can manually trigger scrollTriggers so that on click and scrollTrigger both work in sync right now im im having some difficulty in syncing both onclick and scrollTrigger. The content must chnage in scrollTrigger and also when onClick also the content must change. It would be really helpful if someone can point me in the right direction or with some resources.Following is the scrollTrigger functionality 

useGSAP((context, contextSafe) => {

    const mm = gsap.matchMedia();

    mm.add("(min-width:1024px)", () => {

      gsap.set(".content", { autoAlpha: 0 });

 

      const headlines = gsap.utils.toArray(".text");

 

      const totalDuration = 3000;

      const singleDuration = totalDuration / headlines.length;

 

      const lineTimeline = gsap.timeline();

 

      ScrollTrigger.create({

        trigger: ".pin-up",

        start: "top 10%",

        end: "+=1500px",

        pin: true,

        scrub: true,

        animation: lineTimeline,

      });

 

      headlines.forEach((elem: any, i) => {

        const smallTimeline = gsap.timeline();

        const content = document.querySelector(".content-wrap");

        const relevantContent = content?.querySelector(`.content-${i}`)!;

 

        ScrollTrigger.create({

          trigger: "body",

          start: "top -=" + singleDuration * i,

          end: "+=" + singleDuration,

          animation: smallTimeline,

          toggleActions: "play reverse play reverse",

        });

 

        smallTimeline

          .to(

            elem,

            {

              duration: 0.2,

              color: "white",

              backgroundColor: "#3A60B6",

              borderRadius: "1.25rem",

              onStart: () => setActiveIndex(i),

            },

            0

          )

          .set(relevantContent, { duration: 5, autoAlpha: 1 }, 0);

      });

    });

  }, {});

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Im not 100% certain that I understand what you're trying to do. You want your animations to happen on scroll, but also allow people to click buttons and then trigger the same animation? Have you seen ScrollToPlugin docs? With it you can animate to certain point on the page using scroll, this means all your ScrollTriggers will also trigger I think that is what you're looking for, but without a minimal demo it is hard to judge, so if you can provide one we'll be happy to point you in the right direction. 

 

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

[RADNM]

I resolved it I found a similar project(

See the Pen rNJOrga by akapowl (@akapowl) on CodePen

) and solved it Thank you so much for the time and support