[Stagger items in viewport, then load everything outside of it]

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.

[Stagger items in viewport, then load everything outside of it]

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?

 

[Make element go to end or start of timeline if retriggered]

That makes perfect sense now! Thanks a lot @akapowl

[Make element go to end or start of timeline if retriggered]

If you click the trigger and let the animation play completely there is no problem. However, if you click it again before the animation ends the element gets "stuck" at the point it was retriggered from. This is even more apparent if you click the trigger multiple times fast

 

What would be the best way to fix this?

See the Pen NWRbvXE by joelklease (@joelklease) on CodePen

[Anchor link to end of element's position while using ScrollTrigger]

Thanks @akapowl - this worked. I would never have been able to figure that out! Thanks for your help

[Anchor link to end of element's position while using ScrollTrigger]

4 minutes ago, akapowl said:

Seems like maybe a browser bug.

Interesting... it seems to work perfectly fine for me on Chrome & Firefox

 

The issue with that ScrollToPlugin method is it clashes with the scroll-behavior: smooth property, and I want to use it across all links on the website - not just ones I tag with a class.

[Anchor link to end of element's position while using ScrollTrigger]

4 minutes ago, akapowl said:

When I view the pen and click on the link, the window instantly jumps to the bottom

Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed).

 

5 minutes ago, akapowl said:

GSAP's ScrollToPlugin for animating the scroll down to the bottom

Ok thank you, I'll give that a go.

[Anchor link to end of element's position while using ScrollTrigger]

I am animating the position of an element which I am also linking to with an anchor link. Since this element is triggered by scrolling to it and starts off the page, this results in a jumpy performance.

 

I understand a workaround could be to create a static container which doesn't move and link to that, but that isn't ideal in my situation. I was wondering if it's possible to link to where the element would finish, instead.

See the Pen RwGwjWO by joelklease (@joelklease) on CodePen