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.