The story published last night about the tragic Notre Dame fire in the NYTimes had some excellent animations, all controllable via scrolling. Check it out: https://www.nytimes.com/interactive/2019/07/16/world/europe/notre-dame.html
They use animated Clip Paths (SVGs) to unmask certain parts of the red lines drawn on the images, but I thought I would try recreating one with the vector tool:
Getting the ‘line-draw’ timeline for a vector shape’s stroke to animate based on the scroll position is pretty easy to do.
var whichTimeline = 'Main Timeline';
var totalDuration = hypeDocument.durationForTimelineNamed(whichTimeline);
var scrollSpeed = 4.5
// 5 is super slow. 1 is a very quick animation movement.
window.onscroll = function() {scrollTimelineSync()};
function scrollTimelineSync() {
whatScroll = (document.body.scrollTop || document.documentElement.scrollTop ) / (totalDuration * scrollSpeed)
hypeDocument.goToTimeInTimelineNamed(whatScroll, whichTimeline);
}
This code was lovingly borrowed from this post.
Example doc: scroll-example.hype.zip (543.6 KB)