How to Reduce the speed of GSAP scroll animation.

[ej2]

const drawImage = useCallback(() => {
    const image = images[defaultFrame.frame];
    const canvas = document.querySelector("canvas") as HTMLCanvasElement;
    // window.innerWidth
    canvas.style.width = `${width}`;
    // window.innerHeight
    canvas.style.height = `${height}`;

    const context = canvas.getContext("2d") as CanvasRenderingContext2D;
  
    // window.innerWidth
    context.canvas.width = width;
    // window.innerHeight
    context.canvas.height = height;

    context.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the image on the canvas
    //, width, height
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  }, [defaultFrame.frame, height, images, width]);

  const initGSAP = useCallback(() => {
    gsap.to(defaultFrame, {
      frame: frameCount - 1,
      snap: "frame",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        pin: "canvas",
      },
      onUpdate: drawImage,
    });
    gsap.fromTo(
      ".game",
      {
        opacity: 0.1,
      },
      {
        opacity: 1,
        scrollTrigger: {
          scrub: true,
          start: "0%",
          end: "100%",
        },
        onComplete: () => {
          // do stuff
        },
      }
    );
    images[defaultFrame.frame].onload = drawImage;
  }, [defaultFrame, drawImage, images]);

I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this?

Here a video
 

[mvaneijgen]

Hi @ej2 welcome to the forum. 

 

Check out this video from the YouTube channel. Particularly the end: property 

 

If you have more questions, please post a minimal demo, so we can better help you. Hope it helps and happy tweening! 

[ej2]

Thank you, @mvaneijgen

This video you sent solved the problem, I was having!