I am trying to animate a path incrementally on scroll. I am following the techniques outlined here and here. I have my animation areas broken up into segments, and I am using waypoints to activate each segment. once activated (when the top of the segment hits the top of the viewport), the segment listens for the scroll event and then calculates the percentage of line to animate based on this snippet:
var scrollPercentage = rect.top / rect.height;
This seems to work ok, codepen is here. however I need this animation to start prior to the segment reaching the top of the viewport, say when it is 100px from the top. Also I need a way to calculate the percentage when rect.top is between 0 and 100. For some reason when I add a conditional statement it either a. doesn't fire or b. draws the path backwards:
if (rect.top > 0 && rect.top < 100) {
//unsure what how to calulate and trigger before
//top of viewport
//var scrollPercentage = ?;
} else if (rect.top < 0 && rect.bottom > 0) {
var scrollPercentage = rect.top / rect.height;
}
You just need to add an offset to the rect top and bottom values. Then use that value in your comparison.
I've called it prestart.
var prestart = 100;
if ((rect.top - prestart) < 0 && (rect.bottom - prestart) > 0) {
var scrollPercentage = (rect.top - prestart) / rect.height;
}