Staggered parallax

[neworigin]

After going through a few of the tutorials I tried my hand at creating a parallax layout using the ScrollTrigger library. What I am trying to do is have the text slide in and have the photo fade in and then scroll upwards at different speeds to create the parallax effect.

I know I need to loop through the sections but it looks like it is applying the transformations across all sections rather than each one. 

See the Pen mdRrxMN by neworigin (@neworigin) on CodePen.

[ZachSaucier]

Hey neworigin and welcome to the GreenSock forums. 

 

You're making one of the most common ScrollTrigger mistakes: using general selectors when you should use scoped ones. The article goes into more details about how to fix it.

[neworigin]

Thanks so much  for the quick response! I took a look at the article you sent and indeed the selectors was the issue. I've updated the codepen and the parallax seems to be working. Any thoughts on the best approach for fading in the elements? I started to figure out togglreClass but wondering if you have another handy link with an example? 

[ZachSaucier]

First off, when posting a demo to these forums please use the "fork" button so that the old version is retained. That way context is not lost for other readers  

 

As for the fading, I'd likely create a timeline with whatever animations that you need and attach the ScrollTrigger to the timeline instead.