Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Semblance

Reveal elements one at a time on scroll

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.

Elzette

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@PointC aaaahh - thank you so much for that resource! 😅

Did not know about that page 🤭It is very helpful indeed. 

Best wishes. 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×