Two scrollTrigger in one timeline

[asyncasad]

"use client";
import { useEffect, useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import _ScrollTrigger from "gsap/ScrollTrigger";

export default function Home() {
  const el = useRef();
  const tl = useRef();
  const main = useRef();
  useLayoutEffect(() => {
    gsap.registerPlugin(_ScrollTrigger);
    const ctx = gsap.context(() => {
      tl.current = gsap
        .timeline({
          scrollTrigger: {
            trigger: ".main",
            start: "top top",
            scrub: true,
            pin: true,
            end: "100%",
          },
        })
        .to(".box", {
          rotate: 360,
        })
        .to(".circle", {
          translateX: 1000,
        });
    }, el);
    return () => ctx.revert();
  }, []);

  return (
    <div className="app" ref={el}>
      <div className="main h-screen flex justify-center items-center">
        <div className="box w-5 h-5 bg-blue-500"></div>
        <div className="circle w-5 h-5 rounded-full bg-red-500"></div>
      </div>
      <div className="border-2 border-pink-500 h-60"></div>
      <div className="border-2 border-red-500 h-60 bello"></div>
    </div>
  );
}

This is my Next.js code snippet. Here I want the second animation to happen after the first animation. In the second animation the circle should translateX to value of 1000 in the duration of 15s. During this time the person should not be able to scroll as what happens during the rotation of the box. i.e the backtground should be fixed. Now when the 15s is over then it should scroll like normal page. 
Note that the translate property doesnot depend on scrub and is an individual animation.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates 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 dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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. 

 

Also check out this video how to work with ScrollTrigger 

 

 

[Rodrigo]

Hi,

 

Indeed a minimal demo would be great to have in this case.

 

The only thing I can spot is that you want to pause the scrolling by adding something that is inside a Timeline that is controlled by a ScrollTrigger instance. That's seems like a logical impossibility to me. I think  one approach could be to to prevent the default in the wheel/touch events while that animation happens which could be triggered by the onLeave callback in ScrollTrigger.

 

You should take a look at this example using ScrollTrigger and the Observer Plugin, is not the same but the concept of preventing scrolling for an amount of time is there:

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

 

Hopefully this helps.

Happy Tweening!