I'm following a tutorial on YouTube and almost got to the end when I ran into an odd problem. When I scroll my page, the images should fade in from opacity 0 to opacity 1. But for some reason, my images don't fade in at all. They stay at visibility: hidden for some reason and I have no idea why. From what I can tell from the tutorial, I should see the images being set from opacity:0 to opacity: 1 when I scroll, but they stay at visibility: hidden and opacity: 0. I have a feeling I'm missing something, but I'm not quite sure what it is.
I attempted to repeat this problem on Codepen to see if maybe it was something I was running in VS Code that was causing the error, but wasn't able to repeat the problem in Codepen. Actually now, my images don't fade in or out at all in Codepen. Not really sure what's going on with my code at this point.
Here's the code I currently have - I'm new to GSAP so I'm not really sure what it is that I'm missing to make the images fade in and out on scroll correctly. I have a feeling it's something simple and I'm just not seeing it.
Thanks for the help!
YouTube tutorial I was following - (I got stuck at 14:23)