This is my quick recall of what I’ve learned about ScrollSmoother and ScrollTrigger today. ScrollSmoother makes the page scroll “smoother,” as the name suggests. ScrollTrigger makes the animation trigger depend on the user’s scroll.

By setting the scroll trigger to a selector, you can make the animation happen when the top of the selector enters 50% of the viewport. For example, use the property scrollTrigger: “.box”.

You can customize the scroll trigger by turning it into an object with multiple properties, such as:

gsap.to(".box1", {
  x: "500px",
  duration: 5,
  scrollTrigger: {
    trigger: ".box2", // .box2 will be the trigger of the animation
    markers: true, // enable showing the marker on screen
    start: "top center", // the first property ("top") is for the trigger, the second property ("center") is for the viewport; the animation will start when the "top" part of the trigger hits the "center" of the viewport.
    end: "bottom 10%", // same order as "start"; the animation will end when 10% from the top of the viewport hits the bottom of the triggered element
    scrub: true, // this will control the animation as you scroll up or down
    toggleAction: "play resume none none" // onEnter, onLeave, onEnterBack, and onLeaveBack
  }
});