Opacity turning 1 on page reload past the trigger

[codenub]

Hello there,

I'm running into an issue where if I reload/refresh the page PAST the scrolltrigger area ('bottom spacer' area in codepen),

the opacity of the elements don't get to set at 0, but instead 1.

Basically it only works only if I refresh the page ABOVE or IN the scrolltriggered area (yellow background section or 'upper spacer' area).

I wasn't able to successfully recreate the problem in codepen because on page reload it always scrolls to top.

 

A little help would be great!

Thank you in advance.

See the Pen ZEePNMK by jjchung13 (@jjchung13) on CodePen

[OSUblake]

Hi @codenub

 

First, ID's have to be unique. You have #appear all over the place. You should probably change that to a class.

 

Why don't you use a timeline/tween for your ScrollTrigger instead of using callbacks? You can use toggleAction to change how the animation plays.

 

Quote

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

[codenub]

@OSUblake Thank you for your help! That was way more sophisticated way of approaching. Although it was still showing 'opacity:1' when I reload after the trigger. Interestingly, and I don't know why it worked like this, but if I put duration as something really small like 0.0001 instead of 0, that resolved the problem.

Doing so in my original code didn't fix it, it only worked on the new updated code with your suggestion.

Thanks for you help!