Scrolling animations in the NY Times Notre Dame Story

Tips & Tricks
1

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)

3 Likes
2

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