Pause the horizontal ScrollTrigger animation to start another

[arsxlanali]

Hello,
I am new to the GSAP community, I want to implement the GSAP horizontal Scroll. I have a screen of full view width and height section. I want to pause the horizontal scroll animation for 100% of the screen. In the meantime, I want to add the scroll animation to that page. 
For example: We are scrolling through our section and at one section our section is pinned, and then another animation starts. A new section on the right coming over the section before. 
Below is my implementation in the Next Js. 

 

"use client";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Login from "./login/page";
import Register from "./register/page";
import LandingPage from "./landingPage/page";
import LandingTransition from "./landingPageTransition/page";
import Category from "./categories/page";
import CategoriesList from "./categoriesList/page";
import PhilosophyPage from "./philosophy/page";
import Header from "./__components/header/Header";
import ArchetypePage from "./archetype/page";
import { escape } from "querystring";
import Accordion from "./__components/accordians/Accordians";
import Profile from "./profile/page";
import {useIsomorphicLayoutEffect} from '../helpers/isomorphicEffect'

gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const router = useRouter();
  const [activeNav, setActiveNav] = useState(null);
  const [toggleNav, setToggleNav] = useState(1);

  
  useIsomorphicLayoutEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    let sections = gsap.utils.toArray(".panel");

    let scrollTween = gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none", 
      scrollTrigger: {
        trigger: "#container1",
        pin: true,
        scrub: 1,
        end: "+=14000",
      },
    });



    gsap.to("#textCatogries", {
      y: -120,
      backgroundColor: "#1e90ff",
      ease: "none",
      scrollTrigger: {
        trigger: "#textCatogries",
        containerAnimation: scrollTween,
        start: "center 80%",
        end: "center 20%",
        scrub: true,
        id: "2",
      },
    });


    gsap.set(
      ".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end",
      { autoAlpha: 0 }
    );
    ["landing", "archtype", "category", "cetogiresList","philosophy"].forEach((triggerClass, i) => {
      ScrollTrigger.create({
        trigger: "." + triggerClass,
        containerAnimation: scrollTween,
        start: "left 30%",
        end: i === 3 ? "right right" : "right 30%",
        markers: false,
        onToggle: (self) =>
          gsap.to(".marker-" + (i + 1), {
            duration: 0.25,
            autoAlpha: self.isActive ? 1 : 0,
          }),
      });
    });
  }, []);

  const handleNav = (navNumber: any) => {
    if (navNumber === activeNav) {
      setActiveNav(null);
    } else {
      setActiveNav(navNumber);
    }
  };

  return (
    <div className="">
      <Header
        navTheme={
          toggleNav == 2
            ? "bg-primary text-white"
            : toggleNav == 3
            ? ""
            : "bg-[#E3FF00]"
        }
        toggleNav={activeNav === 2}
        handleNav={() => handleNav(2)}
        navCol={toggleNav}
      />
      <div className="mainans ">
        <div className="containerMain" id="container1">

          <section className={`panel landing`}>
            <LandingTransition />
          </section>
          <section className={`panel archtype`} data-pin="true">
            <ArchetypePage />
          </section>
          <section className={`panel category`} data-pin="true">
            <Category />
          </section>
          <section className={`panel cetogiresList`} data-pin="true">
            <CategoriesList />
          </section>

          <section className={`panel philosophy`} data-pin="true">
            <div className="Philosophy">
              <PhilosophyPage scrollCheck={true} />
            </div>
          </section>

        </div>
      </div>
    </div>
  );
}

 

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

[mvaneijgen]

Hi @arsxlanali welcome to the forum!

 

We love to see minimal demo's, so that we can directly dive into the code and modify things! Also include what steps you've already tried to fix your issue, that way we can see your thought process and thus better help you.

 

Check out our Stackblitz starter templates for React (and please read this article how GSAP works with React!)

 

[arsxlanali]

Hi @mvaneijgen, thanks for your reply. 
I have gone through the provided resources, but I am unable to find the solution to my problem. 
Can you please help me with the solution?

I have implemented a solution using this Official Green Sock code pen. I want a solution like, when we reach the 3 sections, I want to pin or pause for a certain amount of scroll. During that pause, another animation should work which is also based on the Scroll. 
How to do that?

Thanks.

This is the reference GreenSock code pen. 

[mvaneijgen]

Sure we love to help! But before we can do that we want a minimal demo that you've created with your code and which steps you've already tried. 

2 hours ago, mvaneijgen said:

We love to see minimal demo's, so that we can directly dive into the code and modify things! Also include what steps you've already tried to fix your issue, that way we can see your thought process and thus better help you.

 

Check out your starter templets, to get you started. As soon as you've created a demo, we can jump in your code and help you. Ynfortunately we just don't have the resources to provide free general consulting and create a demo for you, if we would do that we could only help a few people per day and that wouldn't be fair to anyone! So please check below also be sure to read the React article ! 

2 hours ago, mvaneijgen said:

Check out our Stackblitz starter templates for React (and please read this article how GSAP works with React!)

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. This works the same for Stackblitz if you want to use that. 

 

If you're just looking for someone who can do the work for you, you could make a post on our jobs & freelance forum

[Rodrigo]

Hi @arsxlanali,

 

Maybe this thread can provide some good pointers:

There is an example in Next and codepen as well for the behaviour.

 

Keep in mind that pinning is not something supported when creating fake horizontal scroll animations for logic reasons, because you're not actually scrolling horizontally, you are using GSAP to move on the X axis some elements, nothing more, so in order to resemble pinning, you have to pause that motion on the X axis to make other animations and then keep that motion.

 

Hopefully this helps.

Happy Tweening!

[arsxlanali]

Hi @Rodrigo,
Thank you for your help. This thread is really helpful.