dubfonik Posted November 22, 2021 Share Posted November 22, 2021 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 More sharing options...
GreenSock Posted November 22, 2021 Share Posted November 22, 2021 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. 3 Link to comment Share on other sites More sharing options...
dubfonik Posted November 22, 2021 Author Share Posted November 22, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 23, 2021 Share Posted November 23, 2021 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now