Jump to content
Search Community

Staggered parallax

neworigin test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

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