scroll trigger Scroll trigger responsive issue

[yashc]

I am using this slider as a way to slide through items, now the problem is not in desktop view, there it works well, the main issue is in mobile view which seems to be bugging out and leaving a huge pin space and when scroll down the pin space wont get small or something which makes the items to scroll but there being huge gap between next element i tried doing my research for a day but could not find the issue, chatgpt was also not able to help
angry-tess-mzkscz - CodeSandbox
THis is my codesandbox link, please open it in new window and then use mobile view with dev tools to replicate the issue 

[GSAP Helper]

Hm, your CodeSandbox is giving this error: 

Quote

Could not find module in path: '../../../assets/Images/bb201a3393c4dd27d8c758e2bf7c.jpg.webp' relative to '/src/index.js'

 

And is there anything in particular that we must do in order to clearly see the issue (once you fix that error)? 

[yashc]

My bad sorry for that, I could not figure out how i can upload a image in sandbox why is it so complicated lol, but i created a short video demonstrating the issue so i wont take too much of your time

The issue is that the space between slider and next component, ( ignore the last component ill make it responsive later lol) But the space being created when i try to make the screen smaller is my concern as idk how to fix it it goes away tho when i remove pin spacing, but then content (next component) just goes behind and past the slider This is my slider code
 

import React, { useEffect, useState, useRef, useCallback } from "react";

import styled from "styled-components";

import cafe from "../../../assets/Images/bb201a3393c4dd27d8c758e2bf7c.jpg.webp";

import gsap from "gsap";

import { CustomEase } from "gsap/CustomEase";

import _debounce from "lodash/debounce";

 

import ScrollTrigger from "gsap/ScrollTrigger";

 

gsap.registerPlugin(ScrollTrigger);

 

 const Slider = () => {

  const [isAnimating, setIsAnimating] = useState(false);

 

  const Imagediv = useRef();

  const Covera = useRef();

  const Container = useRef();

  CustomEase.create("Seperator", "M0,0 C0.05,0.19 0.33,0.87 1,1");

 

  const Handleanimation = (event) => {

    if (!isAnimating) {

      setIsAnimating(true);

      const target = event.currentTarget;

 

      gsap.to(target, {

        scale: 0.95,

        duration: 0.1,

        ease: "Seperator",

        yoyo: true,

        repeat: 1,

        onComplete: () => {

          setIsAnimating(false);

        },

      });

    }

  };

 

  const animation = useCallback(() => {

 

    const Section = gsap.utils.toArray(Imagediv.current.children);

    const t1 = gsap.timeline({});

     

    t1.fromTo(

      [Imagediv.current, Imagediv.current.children],

      {

        x: 950,

         stagger: 0.1,

        duration: 2.5,

      },

      { x: 650, stagger: 0.1, duration: 2 }

    );

     

    gsap.to(Section, {

      xPercent: -150 * (Section.length - 1),

      ease: "none",

      duration: 6,

      scrollTrigger: {

        trigger: Imagediv.current,

        start: "top top",

        pin: Covera.current,

 

        scrub: 1.5,

        markers: true,

        end: `+=3000`,

       },

       

    });

  }, []);

 

  useEffect(() => {

    let ctx = gsap.context(() => {

      animation();

    }, Covera.current);

 

    return () => ctx.revert();

  }, []);

 

  return (

    <Cover ref={Covera}>

      <div ref={Container}>

        <Imagecontainer ref={Imagediv}>

         

          <Imageelement onClick={Handleanimation}>

            <img src={cafe} alt="" />

          </Imageelement>

          <Imageelement onClick={Handleanimation}>

            <img src={cafe} alt="" />

          </Imageelement>

          <Imageelement onClick={Handleanimation}>

            <img src={cafe} alt="" />

          </Imageelement>

          <Imageelement onClick={Handleanimation}>

            <img src={cafe} alt="" />

          </Imageelement>

        </Imagecontainer>

      </div>

    </Cover>

  );

};

 

export default Slider;

 

const Textabsolute = styled.div`

  position: absolute;

  top: 50%;

   transform: translate(-50%, -50%);

  color: white;

  font-size: 5rem;

`;

const Cover = styled.div`

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

 `;

const Imagecontainer = styled.div`

  height: 100vh;

  display: flex;

  gap: 7rem;

  background-color: #d1cbb8;

`;

const Imageelement = styled.div`

  margin-top: 5rem;

  width: 30rem;

  will-change: transform;

  img {

    width: 100%;

    object-fit: cover;

  }

`;

[Rodrigo]

Hi,

 

Unfortunately a video and some code snippets don't really help. You can try to fork this example in order to create a demo that clearly illustrates your issue:

https://stackblitz.com/edit/react-cxv92j

 

There are three things I can give you my thoughts:

1. Calling a method that creates a GSAP instance inside of a GSAP Context instance is not doing what you expect, because while the method gets executed, the GSAP instance(s) created in that method are not inside the GSAP Context scope, so those won't get reverted. For that your method should return the GSAP instance:

   const animation = useCallback(() => {
   
     const Section = gsap.utils.toArray(Imagediv.current.children);
     const t1 = gsap.timeline({});
   
     t1.fromTo(
       [Imagediv.current, Imagediv.current.children],
       {
         x: 950,
         stagger: 0.1,
         duration: 2.5,
       },
       { x: 650, stagger: 0.1, duration: 2 }
     );
   
     gsap.to(Section, {
       xPercent: -150 * (Section.length - 1),
       ease: "none",
       duration: 6,
       scrollTrigger: {
         trigger: Imagediv.current,
         start: "top top",
         pin: Covera.current,
   
         scrub: 1.5,
         markers: true,
         end: `+=3000`,
       },
   
     });
   }, []);

   This method should either return both instances (which would add another wrinkle) or create two different useCallbacks and each should return a specific instance.

2. I don't see the point of having a useEffect hook without any dependencies and then a useCallback without any dependencies as well. Your code in the useCallback is short, why not add everything in the useEffect hook? With that you can get everything created inside the GSAP Context instance and it will be reverted in the cleanup phase.

3. Be careful about creating GSAP instances outside a GSAP Context instance. If the component gets unmounted those will not be reverted and could be still running afterwards, which could lead to errors or memory leaks. Better use the add() method to create a method in the GSAP Context instance and then call that method:

   const ctx = useRef();
   
   const myMethod = () => {
     ctx.current.add(() => {
       // Create your GSAP instances here
     });
   };
   
   useEffect(() => {
     ctx.current = gsap.context(() => {});
     
     return () => ctx.current.revert();
   }, []);

   Another option is this:

   const ctx = useRef();
   
   const myMethod = () => {
     ctx.current.createInstance();
   };
   
   useEffect(() => {
     ctx.current = gsap.context(() => {
       self.add("createInstance", () => {
         // Create your GSAP instances here
       });
     });
     
     return () => ctx.current.revert();
   }, []);

Finally it seems that you're having an issue with responsiveness as well (or at least it seems from the video you shared). Maybe you should take a look at GSAP MatchMedia:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!