Jump to content
Search Community

ScrollTrigger array trigger

Sites Built Fast test
Moderator Tag

Recommended Posts

So I'm trying to animate all h1 elements on a page using ScrollTrigger, but running into an issue with the trigger property.

 

Perhaps I am going about this all wrong, but my first attempt before RTFM was based on the knowledge that I can do this:

 

gsap.to(gsap.utils.toArray('h1'), {
	...
	backgroundColor: (index, element, elements) => (0 === index % 2 ? 'black' : 'white')
	...
});

I simply tried to do the same with the trigger property by using a function like so:

 

gsap.to(gsap.utils.toArray('h1'), {
	...
	scrollTrigger: {
        trigger: (index, element, elements) => elm
	}
	...
});

Alas, I cannot, because the only arguments passed to the trigger function seems to be an instance of ScrollTrigger itself. How does one go about specifying the current element as the trigger when using ScrollTrigger on an array?

See the Pen wvMVXBW by openowlnight (@openowlnight) on CodePen

Link to comment
Share on other sites

I'd recommend looping through the headers and creating a tween with a ScrollTrigger for each h1 like

 

See the Pen qBbeyvm?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Also you can pass a css string selector into your tweens

//not necessary
gsap.to(gsap.utils.toArray('h1'), {x:100}) 


// recommended
gsap.to("h1", {x:100}) 

Also, I believe it's been recommended that the trigger is not the same thing you are animating as it can potentially mess up ScrollTriggers internal calculations of where things are in the viewport. So maybe use each parent div as the trigger.

  • Like 4
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...