things being set to transform: translate(0px, 0%) when not in use and in between use. Pls help!

[SeriousTimber]

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.

See the Pen povKgQW by tim-basic (@tim-basic) on CodePen

[SeriousTimber]

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??

[GreenSock]

Sorry to hear about the trouble, @SeriousTimber. Unfortunately, it's just way too time-consuming for us to troubleshoot a live site that uses 3rd party plugins (ScrollMagic is not a GreenSock product) and your codepen obviously has a ton of problems (it's not loading GSAP, it has PHP code, a bunch of minified CSS, and almost 300 lines of JavaScript). If have a GSAP-specific question and can provide a reduced test case with only the bare essential code, we'd love to help. 

 

This definitely had me confused/concerned: 

 .add(function() {
   $("#growth").css("-webkit-transform", "translate(0px, 100%)");
   $("#growth").css("transform", "translate(0px, 100%)");
   $("#connect").css("-webkit-transform", "translate(0px, 100%)");
   $("#connect").css("transform", "translate(0px, 100%)");
 })

Why are you doing that? Seems like it'd be infinitely better to just .set("#growth, #connect", {yPercent: 100, xPercent:0, y:0, x:0})

 

And a lot of your tweens are animating to percentage-based x or y but you should use xPercent and yPercent instead. 

 

Perhaps you could just identify a simple part of your animation that's not working, and isolate that in a codepen? 

[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.