Jump to content
GreenSock

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

Stagger items in viewport, then load everything outside of it

Recommended Posts

I have a grid of images on a page that extends past the viewport height. When the user lands on the page, I'd like to randomly stagger (fade in) the images that are visible within the viewport (ie. "above the fold"). Once that stagger has finished, the rest should then be faded in so that when the user scrolls down they are all visible (without any fading).

I assume I'd use ScrollTrigger for this, but unsure how best to do it. Would I need to use the standalone ScrollTrigger.create() method for this?

 

Link to comment
Share on other sites

You're not doing any scroll-triggered stuff, though, right? You merely want to get all the ones that are in the viewport at one time (load), randomize the fade-ins of those, and then after those animations are done you want the rest to fade in simultaneously, right? 

 

If so, you don't really need ScrollTrigger at all. You can use ScrollTrigger.isInViewport() as a convenience method for sure, or you could make your own that just check the getBoundingClientRect() to see if it's in the viewport. 

 

I'd do something like (pseudo code):

let elements = gsap.utils.toArray(".box"); // put them all in an Array
let tl = gsap.timeline();

elements.filter(el => ScrollTrigger.isInViewport(el)).forEach(el => {
  // randomized stuff: 
  tl.to(el, {
    opacity: 1
  }, gsap.utils.random(0, 2)); // insert randomly between 0 and 2 seconds into the timeline
});

tl.to(elements.filter(el => !ScrollTrigger.isInViewport(el)), {opacity: 1});

If you still need some help, please provide a minimal demo and we'd be happy to answer any GSAP-specific questions. 

  • Like 3
Link to comment
Share on other sites

17 hours ago, GreenSock said:

You're not doing any scroll-triggered stuff, though, right? You merely want to get all the ones that are in the viewport at one time (load), randomize the fade-ins of those, and then after those animations are done you want the rest to fade in simultaneously, right? 

 

If so, you don't really need ScrollTrigger at all. You can use ScrollTrigger.isInViewport() as a convenience method for sure, or you could make your own that just check the getBoundingClientRect() to see if it's in the viewport. 

 

I'd do something like (pseudo code):

let elements = gsap.utils.toArray(".box"); // put them all in an Array
let tl = gsap.timeline();

elements.filter(el => ScrollTrigger.isInViewport(el)).forEach(el => {
  // randomized stuff: 
  tl.to(el, {
    opacity: 1
  }, gsap.utils.random(0, 2)); // insert randomly between 0 and 2 seconds into the timeline
});

tl.to(elements.filter(el => !ScrollTrigger.isInViewport(el)), {opacity: 1});

If you still need some help, please provide a minimal demo and we'd be happy to answer any GSAP-specific questions. 

Amazing, Sir Jack. That's exactly what I needed. I'm always amazed by the help & support given by you and your team in this forum.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

8 hours ago, dubfonik said:

Amazing, Sir Jack. That's exactly what I needed. I'm always amazed by the help & support given by you and your team in this forum.

Happy to help, @dubfonik! It's always nice to hear when someone recognizes the effort we put in around here :)

 

Enjoy!

  • Like 1
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.
×