Jump to content
Search Community

Reveal elements one at a time on scroll

Semblance test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello ?


I've set up a CodePen where I would like to have a few projects (elements) reveal one after each other on scroll - as it appears on the page. 

From experience this is quite easy to achieve if elements have a different class / id. 

What I am struggling with however, wrapping my head around, how it can work if they all have the same class. 

Also to keep the approach and code 'DRY'. 


I've done a bit of searching around, but no luck finding anything that makes sense to me to use. 

My CodePen currently works with all of the elements disappearing at the same time on scroll... ?


Would be great to someones thoughts / experience on this one!


Thank you in advance.


See the Pen NWKRjVj by semblance (@semblance) on CodePen

Link to comment
Share on other sites

I see you're using ScrollMagic. I think you'd benefit by reading my recent article:

Demos #4, #7, and #8 show how to create multiple scenes in a loop with jQuery. You can certainly use a vanilla JS loop too. 


I think your answers will be in that article, but if you have any problems please feel free to post again to this thread.


Happy tweening.



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