Images not showing correctly on scroll

[psykobilliethekid]

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) 

 

 

 

 

See the Pen LwGrZm by Qwicksilver (@Qwicksilver) on CodePen

[ZachSaucier]

Hello and welcome to the forums!

 

You've got a lot of code there. Generally speaking it's a good idea to try and include only the relevant part of the code to reproduce your error in the CodePen demo. It not only makes our job of helping you easier, but also can help you debug your issue and probably solve it yourself! 

 

If you open up your browser's console in the CodePen you can see that it's throwing some errors from the sources not loading correctly. I forked your pen and included the proper sources.

 

The main issue is that your scroll animation doesn't scrub through the timeline fully by the time the scrolling on the page is done. You can test this by setting the starting time of one of the image's .to()s to 0:

 

See the Pen mNVzrv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I've never really used ScrollMagic so I can't tell you how to fix that off the top of my head, but I know that's the issue  

[psykobilliethekid]

Thank you so much for your help! I think the first thing I need to do is not try to code while sick. ?

 

It also seems like the "-=3.5" on the end of .from() doesn't seem to like being set at that position. But if I set it to 0 or 1 it seems to work. I'm not really sure why. I guess I need to figure out some more about ScrollMagic - at least I have a start though. 

 

Thanks again!