Scrolling animations in the NY Times Notre Dame Story

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:

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: (543.6 KB)


Nice example! Sad topic…

I released a file that works in CMS systems as a widget and offers something similar. See Framer inspired Scroll Effect (Hype 3).

Also have a look at the intersect observer based Hype ScrollKit I just posted Hype ScrollKit (Scrollama, Intersection Observer and more). It also has all the features needed and will support pinning/unpinning and scrollToElement. Currently I can’t continue working on it for now, though. I’ll have time to continue end of the month.

1 Like