SeriousTimber

Okay, will do. the bit of code that has you concerned is required so the sections which correspond to #growth and #connect do not randomly get set to transform: translate(0%, 0%) when the page loads. I've managed to fix that issue. The main issue is when you reverse the scroll around the Growth and Connect sections. For some reason, instead of tracking properly, these two particularly sections are losing their position set with gsap, and are being set to transform: translate(0%, 0%). I will make a codepen to demonstrate the issue.

Also, I've found that this behaviour only happens on larger screens. On laptop screens, it's totally fine!? And, if you scroll all the way down and up the behaviour goes away. The problem which I really need to solve happens when you scroll up inbetween tweens. The tween random gets set to 0px 0% and then sticks in the center of the page. Why does this happen??

Excuse the codepen. I'm not sure how to get it working and what dependencies I should be chucking in. See the website in progress here – http://3.106.172.56/ You'll notice that the growth and connect sections are quite buggy if you scroll up and down. For some reason transform: translate(0px, 0%) is being applied. I have no idea where this is coming from and need help.