Jump to content
GreenSock

pixelarchitect

Reuse the same animation multiple times on the same page

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×