Hi @Nathan Harold
Welcome to the forum.
When you have ScrollMagic hijack the tween/timeline duration you have to think in ratios or percentages. Here's a really basic example:
You'll see three boxes on a timeline. All three start at the same time and move 500px on the x axis. They each have a different duration. (Red:1, Green:5, Blue:10) The duration of the timeline is 10 seconds. I've set the ScrollMagic duration to 50% of the window height. Since the blue box tween has a duration of 10 seconds, it takes the full scroll distance to complete its animation. Whereas the green duration is 5 so it takes 50% of the scroll distance and the red with a duration of 1 only takes 10% of the scroll distance to finish.
It doesn't really matter what duration you set in ScrollMagic. You'll still see the same ratio in the above scenario. Blue:100% of the scroll distance, Green: 50% of the distance and Red:10% of the distance.
When you have a whole timeline that has sequential tweens, the same thing happens. Say you have this timeline:
tl.to (".red", 3, {x:500});
tl.to (".green", 1, {x:500});
tl.to (".blue", 1, {x:500});
The total duration of that timeline is 5 seconds. So the red box will take 60% (3/5) of the scroll distance and the green and blue boxes will each take 20% (1/5) of the scroll distance to complete. Again it does not matter if the ScrollMagic duration is 100px or 10,000px, the percentage of the scroll distance for each of the tweens to complete remains the same.
Make sense?
Happy tweening.