Timeline keyframes advice

The percentage-based animation time-line is pretty tricky to me. I understand that it represents your progress on the entire page. I’ve noticed that as your page grows/changes (as you add/remove elements), it influences the animations. It becomes tedious to go back and adjust the animations after spending so much time to get the “timing” right. Are we genuinely just expected to ‘plan ahead’ with our sections? This is surely difficult considering a client might request iterations etc?

Is it possible to dedicate a timeline to a section instead of the page: so each section has its own timeline from 0-100% and once 100% is reached, the next section’s/the whole page’s timeline comes into effect. Even using custom code?

for example, in the site below - it works perfectly right now, but what if one wanted to add more sections before / after? Surely it would throw everything off-kilter?