[Pin elements with ScrollTrigger]

2 hours ago, ej2 said:

Hello @Rodrigo

 

Thank you but this is not what I was talking about.

What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish.

 

I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery.

I was able to fix the resizing issue with the help of GSAP's ScrollToPlugin. 

[Pin elements with ScrollTrigger]

Hello @Rodrigo

 

Thank you but this is not what I was talking about.

What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish.

 

I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery.

Maybe this might help, here is a link to understand better what I'm talking about.

[Pin elements with ScrollTrigger]

Hey @GreenSock

Here is a replica of what I was trying to explain earlier and also it becomes jittery on mobile devices.

 

See the Pen BaGbGvr by ecj222 (@ecj222) on CodePen

[Pin elements with ScrollTrigger]

Hello @GreenSock,

 

How would you make an element with a ScrollTrigger (also with a pin set to true) of a height of 100vh (full viewport height) maintain its current position even while resizing?

I have tried scrolling the element back to the current view and also using Window to try to set the scroll position to the element but doesn't seem to work.

Thank you for any assistance you can offer on this.

[How to programmatically end a ScrollTrigger instance before the `end` value is actually reached.]

You were right. All I had to do was remove the second scrollTrigger in the useEffect hook and leave just the tween and it worked fine. 

Thank you @Cassie

 

const targets = gsap.utils.toArray(".end svg path");

timeline.current.to(targets, {
    opacity: 1,
    duration: 1,
    stagger: 0.05,
});

 

[How to programmatically end a ScrollTrigger instance before the `end` value is actually reached.]

@Cassie I noticed when I needed to add another ScrollTrigger attached to a different element it triggers at the same time as the first one because the end is too small (+=100) and If the end is increased the scrolling animation experience is not as good.

is there a way I could only begin the second animation when the first Scrolltrigger ends?

Here is the code for the second ScrollTrigger
 

useEffect(() => {
    ScrollTrigger.create({
      markers: true,
      trigger: ".end",
      start: "top top",
      end: "bottom bottom",
      onEnter: () => {
      const paths = document.querySelectorAll(".end svg path") as NodeListOf<HTMLElement>;
      const targets = gsap.utils.toArray(paths);

      timeline.current.play();
      timeline.current.to(targets, {
        opacity: 1,
        duration: 1,
        stagger: 0.05,
      });
      },
      onLeaveBack: () => {
        console.log("leave");
        stopEndAnimation();
        const gameEl = document.querySelector(".game");
        gameEl?.scrollTo({ top: 0, behavior: "smooth" });
        timeline.current.restart();
        timeline.current.pause();
      },
    });
  }, []);

 

[How to programmatically end a ScrollTrigger instance before the `end` value is actually reached.]

This was what I needed and it works perfectly!

 

Thank you, @Cassie.

[How to programmatically end a ScrollTrigger instance before the `end` value is actually reached.]

I'm trying to end a ScrollTrigger animation programmatically.

 

I currently use the Observer plugin for animating through frames of images, and the ScrollTrigger animation to `pin` the current I'm trying to scroll into scope so that way when users scroll it doesn't end up going back to the previous tab without the animation restoring or completing first.

 

Or if there's a way I could `pin` an element using the Observer plugin instead please let me know.

The ScrollTrigger comes in handy when I want to make the scroll become much longer so it enables the Observer plugin to completely move through all the image frames so it completes.

 

Why not just use only ScrollTrigger instead? The problem with that is I need to have control over the speed of how image frames are rendered and the ScrollTrigger becomes Jiterry if you try to set the document's body or documentElement(Html) overflow hidden causing a rerender and resetting the scroll state.

Here's a stack blitz:

https://stackblitz.com/edit/stackblitz-starters-jhpqit?file=src%2FGame.tsx

I appreciate your help.

 

[How to Reduce the speed of GSAP scroll animation.]

Thank you, @mvaneijgen

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

[How to Reduce the speed of GSAP scroll animation.]

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