Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

Link to post
Share on other sites
57 minutes ago, 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 bGegErw by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

 

  • Like 5
Link to post
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 post
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 post
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.

×