Jump to content
Search Community

re-using scrollTrigger

PixelatedOrange test
Moderator Tag

Go to solution Solved by SteveS,

Recommended Posts

Hi all.

Seriously newbie question here, but hope someone can help.

 

I've got a simple scrubbed scrollTrigger that expands a div when it scrolls into the viewport.

 

There's multiple divs of the same class as you go down the page - is there any way to use the same code for all divs?

 

gsap.to(".underlined .border", {
      scrollTrigger: {
          trigger: ".underlined .border",
          end: "bottom center",
          toggleActions: "restart pause restart pause",
          scrub: true,
      },
      duration: 2,
      left: '0',
      right: '0'
    });

 

Above is the scrollTrigger, and I'd like ALL divs with the class .border to do the same thing, but relative to when they each enter the screen.

 

Thanks in advance.

Link to comment
Share on other sites

Probably not the way you are thinking of it, no.

The simplest solution is to get all the elements in an array and iterate over them.

 

const borders = gsap.utils.toArray(".border");

for (const border in borders) {
	ScrollTrigger.create({
		trigger: border,
		...
	})
}

 

  • Like 1
Link to comment
Share on other sites

  • Solution

Any beginner JS tutorial will go over arrays. I used fairly new ES6+ syntax for the example, but it shouldn't be too complicated.

const border = gsap.utils.toArray(".border") takes all elements with ".border" class and puts them into an array.

 

for (const border in borders) {
gsap.to(border, {
      scrollTrigger: {
          start: "top bottom",
          end: "bottom center",
          toggleActions: "restart pause restart pause",
          scrub: true,
      },
      duration: 2,
      left: '0',
      right: '0'
    });
}

 This should do pretty much exactly what you need. Though I modified the start behavior. Otherwise I would google "introduction to javascript arrays" and work from there.

  • Like 2
Link to comment
Share on other sites

Is there something in particular that's confusing about it @PixelatedOrange

 

@SteveS's advice is excellent.

 

Here's a common way your issue would be handled: 

let borderElements = gsap.utils.toArray(".border");

borderElements.forEach((element, i) => {
  gsap.to(element, {
      scrollTrigger: {
          trigger: element,
          end: "bottom center",
          scrub: true,
      },
      left: 0,
      right: 0
    });
});

Note that toggleActions and scrub are mutually exclusive. It logically can't have both. If you enable scrub, it'll just ignore toggleActions. And if you're using scrub, there's really no point in setting a duration because whatever the duration is will simply be stretched to fit between the start and end scroll positions. It doesn't hurt anything to define one - it's just not helpful. 

Link to comment
Share on other sites

No, just me being new to this and getting my head around the coding :-)

 

Am still very green to scrollTrigger, so appreciate your pointers about scrub and toggleActions, was following the main tutorial and didn't see that bit removed when scrub was enabled, but learnt a lot today already!

 

Thanks both, getting the hang of it now :-)

 

 

  • Like 1
Link to comment
Share on other sites

Great! Your animation superpowers are growing, no doubt. Trust me - stick with it through the learning curve and at some point soon the light bulb will go on and you'll be like "oh my gosh, this makes so much sense! Fun!"

 

You'll be an expert in no time. 

 

Good luck. 

  • Like 1
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.
×
×
  • Create New...