Jump to content
GreenSock

RaoulUnger

ScrollTrigger: target multiple elements with same action, but not at the same time

Recommended Posts

Hi,

 

I'm trying to fade out (at scroll) multiple elements on a page. I'm very new to ScrollTrigger (loving it!), and managed get the fading working based on tutorials and some code-pens. I would like the fading of each section to start at the same position in the window. However, at this moment, all sections fade when the first one does. The markers only show beginning and end markers for the first element, so the problem probably is related to the other elements not getting their own starting en ending point. I've set up a simple codepen with four elements now. I could off course just repeat everything with varying trigger-classes - but I'm testing this for a website where much more elements (coming from meta-fields) need to show this behaviour, hence this setup.

 

I'm probably missing something very obvious here, but I can't figure it out. Could someone point me in the right direction?
Thank you!!

 

See the Pen GRqrpZG by RaoulUnger (@RaoulUnger) on CodePen

  • Like 1
Link to comment
Share on other sites

On 10/23/2020 at 11:49 AM, RaoulUnger said:

I'm probably missing something very obvious here, but I can't figure it out. Could someone point me in the right direction?

 

 

Hey @RaoulUnger

 

You are actually making one of the most common ScrollTrigger mistakes.

 

 

 

 

You are targeting all elements with the class of .section.

Since you want each of the elements to be triggered at its own given time, you should loop over them, to give them distinct directions.

 

Here's how you could set it up with GSAP's .utils.toArray()

 

See the Pen 1047b333ef8e501ecde9ceb4b58414e7 by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

 

  • Like 6
Link to comment
Share on other sites

Hi, Paul, thanks a lot for the help and the pen (and for clearifying the class names too...).

I got it working - next time I will consult that Most Common Mistakes document (thanks for that consoling title ;-) ) first!

 

Cheers,

Raoul

 

Link to comment
Share on other sites

1 minute ago, RaoulUnger said:

next time I will consult that Most Common Mistakes document (thanks for that consoling title ;-) ) first!

 

Asking questions to get a better understanding is never wrong, so there's absolutely no pointing fingers here.

 

There's just always some major things to consider when animating - when making animations dependent on special events, even more so.

And that common mistakes page is simply just a super nifty way, to get your head around what might be wrong when something's off, super quick.

 

Glad it worked for you.

Happy scrolling and looping :) 

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Hi guys,

If this was to be applied to a 2 column grid, as opposed to a 1 column grid like in the above example, how would you place a delay between the section on the left animating in and the section on the right animating in?

I've basically got the same thing and I need the right column to animate 0.25s after the left column. I tried using stagger but this doesn't seem to be doing anything...

 

Here's the code I'm using:

 

var sections = gsap.utils.toArray('.gsap-block');
	
	sections.forEach((section) => {
  
		gsap.from(section, {
			scrollTrigger: {
				trigger: section
			},
			duration: 1,
			opacity: 0.5,
			y: 150,
			stagger: 0.25
		});
	})

and here's how the grid looks: (the blocks in each row animate in at the same time)

 

 

Screenshot 2021-11-16 at 18.27.21.png

Link to comment
Share on other sites

Actually might have just made a workaround to this. I've added rule of top: 100px to nth-child(even) and it has the desired effect.

Would be good to know if there's a better way of doing this with gsap though?

Link to comment
Share on other sites

Hey @PixelBorder,

It's always best to add a minimal demo so we can test our solutions!

But maybe something like this? You'd need to check if the block is even or odd and then do a delay.

Stagger won't work in this case because within that loop interation the GSAP tween is only referring to one 'section' - you need multiple elements in order to stagger.
 

var sections = gsap.utils.toArray('.gsap-block');
	
	sections.forEach((section, i) => {
      	let isEven = i % 2 == 0
  
		gsap.from(section, {
			scrollTrigger: {
				trigger: section
			},
			duration: 1,
			opacity: 0.5,
			y: 150,
			delay: isEven ? 0.2 : 0
		});
	})

 

  • Like 2
Link to comment
Share on other sites

Whoops, sorry about that and thank you for the super quick response!

This worked perfectly, thank you.

 

I've not got much of a head for Javascript. I tend to think in terms of CSS when it comes to solutions so it's going to take a bit of a shift in the way I think to get the best out of this. But I'm really impressed with it so far.

Thanks again :)

  • 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.
×