Skip to content

Instantly share code, notes, and snippets.

@slawo-ch

slawo-ch/crawl_animation.js

Created December 15, 2019 22:08
Show Gist options
  • Save slawo-ch/798287c1b9125eac4e7c39441c579780 to your computer and use it in GitHub Desktop.
Save slawo-ch/798287c1b9125eac4e7c39441c579780 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crawl_animation.js
const crawl = document.getElementById("crawl");
const crawlContent = document.getElementById("crawl-content");
const crawlContentStyle = crawlContent.style;
// start crawl at bottom of 3d plane
let crawlPos = crawl.clientHeight;
const moveCrawl = distance => {
crawlPos -= distance;
crawlContentStyle.top = crawlPos + "px";
// if we've scrolled all content past the top edge
// of the plane, reposition content at bottom of plane
if (crawlPos < -crawlContent.clientHeight) {
crawlPos = crawl.clientHeight;
}
};
let prevTime;
const init = time => {
prevTime = time;
requestAnimationFrame(tick);
};
const tick = time => {
let elapsed = time - prevTime;
prevTime = time;
// time-scale of crawl, increase factor to go faster
moveCrawl(elapsed * 0.04);
requestAnimationFrame(tick);
};
requestAnimationFrame(init);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment