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

[ej2]

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.

 

[Cassie]

Hi there! I'm getting an import error on your demo I'm afraid.

It also seems like there's quite a lot going on here. Maybe you could break down your requirements a little and make a small vanilla JS demo with the bare essentials needed for us to understand the problem you're trying to solve.

Quote

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.

This is raising flags for me, observer doesn't need a scroll distance as it's all event driven
 

Quote

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

 

Are you maybe trying to swop between observer triggered sections and normal scroll-triggered sections? If so maybe this demo will be helpful?  

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

[ej2]

This was what I needed and it works perfectly!

 

Thank you, @Cassie.

[Cassie]

Hooray!

[ej2]

@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();
      },
    });
  }, []);

 

[Cassie]

Hey, sorry I can't really advise just on that snippet alone - I don't really know what you're doing here. Can you possibly give me a minimal demo to look at?

(If possible in codepen without React as it doesn't seem to be React related.)

Just some notes - 

 

The code you've shown seems odd though, every time you enter that section you're targeting the DOM, grabbing a bunch of elements, then playing a timeline then adding stuff to that timeline after hitting play? Every time? Seems odd. 

 

It also seems odd that you're using ScrollTrigger's callbacks to handle the state of an animation, ScrollTrigger does that automatically, that's what toggleActions and scrub are for.

You can do this too, no need to use querySelector at all.

gsap.utils.toArray(".end svg path")

I'll give you some more feedback when I see the minimal demo!

[ej2]

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,
});