How to find out the last element in an onUpdate function?

[xoxoxoxo]

I have a bunch of images that moves the Y value continuously and while they're moving up I'm turning their visibility on/off. 
I'm calculating respective image's y position to ensure they only show within 20-80% of the viewport.

1. Is there a way to find out if all images have been turned on/off? (I keep a data flag for this)

2. Is there a way to find out if last image is being toggled on? Ideally, I'd like to keep the last image's opacity turned on and then turn every image's opacity on like this: gsap.to('.box', { delay: 0.5, opacity: 1, stagger: 0.2 })

See the Pen wvaOMRZ by taher-space (@taher-space) on CodePen

[ZachSaucier]

4 hours ago, nullhook said:

1. Is there a way to find out if all images have been turned on/off? (I keep a data flag for this)

There are a lot of ways. You could keep track of all of the tweens and check if any of them are active. You could use a counter that is changed when one completes. You could check the data flag that you added. Or something else. 

 

4 hours ago, nullhook said:

2. Is there a way to find out if last image is being toggled on? Ideally, I'd like to keep the last image's opacity turned on and then turn every image's opacity on like this: gsap.to('.box', { delay: 0.5, opacity: 1, stagger: 0.2 })

Sounds like you want to pass in the index to the forEach and use that to do a different effect? If so you can pass it in like so and then use it in an if statement:

boxes.forEach((box, i) => {
  // i is now the index

 

[xoxoxoxo]

@ZachSaucier Thanks a lot!

This was very helpful. I have to create my own "onComplete" flag when all images are done flashing. Maybe not the best looking solution but it works. 

However, I only sometimes see my last image's opacity to 1. I should be seeing when the count equals to the total elements.

Not sure what's causing this? I don't see tl's onComplete function trigger either. It happens after many refreshes though. Is this cause of the onUpdate ticks?
 

[ZachSaucier]

Sorry, I don't follow what you're saying and your code doesn't make much sense to me. Can you try to rephrase what your question is? 

[xoxoxoxo]

Basically while my images move up I'm trying to loop through each image and toggle their opacity on/off except for the last image. Since I have a condition to flash the images that are only within the viewport they aren't sequential. 

For this, I'm maintaining an internal counter and when it equals to the image's array length, that image's opacity should stay on and turn on rest of image's opacity with stagger. (I'm doing this in my timeline onComplete)

I've noticed that the last image's opacity turns on rarely. (after many refreshes). Do you know what might be causing this?

[ZachSaucier]

Why not just make an animation that does both the revealing and the moving for each image at once? Detecting, keeping count, and all of those things seem wholly unnecessary.

[xoxoxoxo]

Are you suggesting using timeline? Cause I feel like I need to calculate image's boundingRect onUpdate in order for it to reveal within the viewport range. I can have it separately but then I can't seem to calculate image's rect within timelines.

[ZachSaucier]

Yes, use a timeline. You don't need to calculate any bounds. Just animate each image the small amount where it's actually seen and chain each of those animations. Simple.