How to only show elements within the center of the viewport?

[xoxoxoxo]

I have two separate animations:
1. images scrolling in/out of viewport

2. toggling visibility of image 

 

When the images toggle on/off you can see sometimes it appears partially below the fold, and then never makes it high enough or is so high up that it's offscreen in a few frames.

How can toggle on/off images that are moving within the center of the viewport? Doesn't have to be exact center but somewhere around it.
Do I have to use IntersectionObserver for this?

See the Pen ExjMMNO?editors=0010 by taher-space (@taher-space) on CodePen

[ZachSaucier]

1 hour ago, nullhook said:

When the images toggle on/off you can see sometimes it appears partially below the fold, and then never makes it high enough or is so high up that it's offscreen in a few frames.

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP  As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP.

 

1 hour ago, nullhook said:

How can toggle on/off images that are moving within the center of the viewport? Doesn't have to be exact center but somewhere around it.
Do I have to use IntersectionObserver for this?

No, you don't have to use intersection observers. You could calculate the position of the element in the window instead.