Reuse the same animation multiple times on the same page

[pixelarchitect]

Is it possible to reuse the same animation over and over on the same page? Currently all the animations on the page are triggered as soon as the first one gets triggered (also all the ones offscreen), what I like to prevent is using the same code over and over again for every element with the same animation.

See the Pen eYRmpjR by pixelarchitect (@pixelarchitect) on CodePen

[OSUblake]

You can loop through your elements like this.

 

gsap.utils.toArray(".scrub").forEach(element => {
  gsap.to(element, {
    x: 200,
    scrollTrigger: {
      trigger: element,
      start: "top 100%",
      end: "bottom top",
      scrub: true,
      markers: {
        startColor: "blue",
        endColor: "blue"
      }
    }
  });
});