How to animate scrolling path

I wanted to try and build something like this page has where as you scroll down the page the overlay goes away and fully reveals the path… If the overlay just revealed vertically I kinda get, but not sure how they are removing it horizontally as well… Not really sure where to start on this… Anyone have a code pens similar to this? is this considered parallax?

https://www.davefox.com/getting-started/process

Each of the vertical lines, horizontal lines and corners are separate <div> elements, each with child <div> element inside. The corners have an overlay PNG image with appropriate transparency: similarly for the graphic elements.

I have not inspected the JavaScript but I expect it is working rather like this:

2 Likes

I like the effect, very clever.

If you look at the classNames for the individual elements, you have .line-filler-from-top and .line-filler-from-left. By checking the className on the element you can determine which transformation to perform, height or width.

Just to share, I was looking at a script called locomotion recently. I thought it was pretty impressive.
https://locomotivemtl.github.io/locomotive-scroll/

It is based on this script

And the repository for it is here
https://github.com/locomotivemtl/locomotive-scroll

Might be worth investigating :slight_smile:

2 Likes