Weird positioning when using fromTo and scrollTrigger to update yPercent

[Kikky]

What I want to achieve is that my big title starting position is in the middle of small title and on scroll it moves (updates y position).

As you can see in demo, big title is positioned below the small title and I can't understand how those calculations between from and to work.
Every combination of values for yPercent in from and to calculates different postion for my title. For example if I put -200 and 100 then it is "centered", also if I put -150 and 50, it is centered. So I need to make some weird calculations every time I change value inside "to"...

Shouldn't "from" just set the initial value, so if I put -50, initial value should be translate-y: -50%? This is how it works for opacity and other properties.

Also, when I finally adjust values to make subtle transition on scroll, my text "jumps" on first load which is another annoying issue...
This jump is also sometimes visible in demo, but not always.

See the Pen VwRmpOJ by kikky902 (@kikky902) on CodePen

[GreenSock]

You are using the default start/end positions for your ScrollTrigger which is: 

start: "top bottom", // when the top of the trigger hits the bottom of the viewport
end: "bottom top" //when the bottom of the trigger hits the top of the viewport

Therefore, since you've set things up such that the trigger element is ALREADY in the viewport, the start would be negative (you'd have to scroll backwards to make the top of the trigger hit the bottom of the viewport), so your tween is starting mid-progress!

 

Don't worry - you can just use clamp(). 🙂

 

I'd strongly recommend watching this video: 

 

See the Pen xxBRraq by GreenSock (@GreenSock) on CodePen

 

Does that help?