Scroll down slowly to trigger non-scrubbing animations. Looks great, right? Then try scrolling fast and notice how the animations overlap!

• preventOverlaps: true kicks in when the ScrollTrigger is about to affect its animation (e.g. a toggleAction) - it finds other [prior] ScrollTrigger-based animations and forces them to their end state to avoid overlaps.
• fastScrollEnd: true kicks in only when you LEAVE the ScrollTrigger's area; it simply says "how fast was the scroll onLeave/onLeaveBack? If it's above the 2500px/second, force the animation to its end immediately".

Advanced configuration

• If preventOverlaps is a string, it acts as a group name so that you can control which ScrollTriggers affect each other's preventOverlaps behavior. It's like setting preventOverlaps: true but only for other ScrollTriggers with the matching string. For example, you could assign preventOverlaps: "group1" (or any arbitrary string) to 3 of your ScrollTriggers so that each of them only prevents overlaps from the other ScrollTriggers that have that same "group1" value.
• If preventOverlaps is a function, it'll be called before the non-scrub animation is affected (unlike other callbacks which occur after it's affected), so you can do whatever you want in preparation. All ScrollTriggers have a getTrailing() method you can use to get an Array of all ScrollTriggers that precede this one in the updating order according to the current scroll direction. Use the endAnimation() method to force a ScrollTrigger's animation to jump to its end state according to its direction (so if it's going backwards, it'll .progress(0) if it's forward, it'll .progress(1)).

  preventOverlaps: (self) => {
    self.getTrailing().forEach((trigger) => {
      trigger.endAnimation();
    });
  }

• If fastScrollEnd is a number, it will be interpreted as the velocity threshold in pixels-per-second, like fastScrollEnd: 1000 would only activate if the velocity is more than 1000 px/second in either direction when leaving the ScrollTrigger's active area.