Animating with jQuery Based on Scroll Percentage

Question

I am currently animating two swords which cross when the user scrolls beyond the original scroll point of 0. Here is the code I am using to do so:

if(sword_static) {
    sword1.css({
        'left': '50.2%',
        'transform': 'rotate(0deg) translateX(-75%)'
    });
    sword2.css({
        'left': '47.35%',
        'transform': 'rotate(0deg) scaleX(-1) translateX(-25%)'
    });
    sword_static = false;
} else if($(window).scrollTop() === 0) {
    sword1.css({
    'left': '46.5%',
    'transform': 'rotate(-45deg) translateX(-50%)'
    });
    sword2.css({
        'left': '48.5%',
        'transform': 'scaleX(-1) rotate(-45deg) translateX(-50%)'
    });
    sword_static = true;
}

This is working, however I would like to animate these swords based on the user's scroll percentage. So when the user scrolls, the sword's animation progress is based on how much the user has scrolled. I presume the use of jQuery's 'animate' may be useful here.

I am currently using the following code (adapted from: https://stackoverflow.com/a/8028584/9692762) to determine what percent the user is scrolled through the entire page:

var s = $(window).scrollTop(),
    d = $(document).height(),
    c = $(window).height();

var scrollPercent = (s / (d - c)) * 100;

Obviously I cannot having the animation playing from a scroll percentage of 0 to 100, because the swords are off the screen at that point - around 20% scrolled should be the point at which the animation has fully played and finished.

Any suggestions would be appreciated.