Skip to main content
100%

Animate SVG path on scroll

✓ Published0🌍 Public
Aajayjayayy
Last edited Aug 10, 2018
Created on Aug 10, 2018

An SVG path of a hand-drawn line animates as the user scrolls, revealing the path incrementally down a tall 20,000-pixel viewport. Using D3 and Lodash, the example maps the browser’s scroll position to the length of the path, drawing only up to a fixed horizontal line (indicated by a marker div). As the user scrolls, the path appears to draw itself progressively, stopping when it reaches the marker. The visualization demonstrates a scroll-driven animation technique applied to a single SVG path with a minimal, fixed marker overlay.

AI-generated description

Make sure to pop out to a new window, and then scroll.

An experiment to see if I can get svg paths to animate only to a certain horizontal line while a user scrolls. Used in my unreleased wongfu side project.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/cdff7e8538477e7222b8'>Animate SVG path on scroll</a>

forked from <a href='http://bl.ocks.org/ajayjayayy/'>ajayjayayy</a>'s block: <a href='http://bl.ocks.org/ajayjayayy/bec836a9239dbad443c673348d2205ae'>Animate SVG path on scroll</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Animate SVG path on scroll

An SVG path is drawn incrementally as the user scrolls, stopping when it reaches a fixed horizontal marker line. The visualization uses D3 to map scroll position to the length of the path, animating the path’s stroke-dashoffset to reveal it progressively. A fixed marker div acts as the target line, and the path data consists of a series of points with varying x-coordinates, creating a jagged line. The example demonstrates scroll-driven SVG animation, built with D3 and Lodash, and is intended for use in an unreleased side project.

Aajayjayayy
95% match
Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel
76% match
Loading thumbnail…

SVG path

A single SVG path element extends dynamically from an initial point, generating a zigzag line that grows downward across a tall, scrollable canvas. Using jQuery and helper functions in JavaScript, the path’s `d` attribute is updated with random horizontal and vertical increments, creating a new line segment for each iteration. The SVG is rendered with CSS-styled stroke properties, while the code manipulates the path coordinates directly.

AAndrei Tuta
76% match
Loading thumbnail…

SVG Fundamentals project

An animated blue line traces a complex looping path within an SVG element using the HTML5 `<animateMotion>` API. The path data, defined by a dense series of cubic Bézier coordinates, drives the continuous movement of the element along the curve. The rendering relies solely on native SVG path and animation capabilities within a minimal HTML page, requiring no external JavaScript libraries or frameworks. The project demonstrates fundamental SVG techniques for creating self-contained, animated vector graphics.

Ssahelmoazamigoodarzi@gmail.com
75% match
Loading thumbnail…

a

This example shows an animated SVG path drawing itself over time, tracing an intricate, meandering line across an 800×600 canvas. The path is styled with `stroke-dasharray` and `stroke-dashoffset` and animated using a CSS `@keyframes` rule, which transitions the offset to zero over four seconds. The visualization relies on native SVG and CSS animation within an HTML document, with no external libraries or data bindings. The code is written for React, though the example itself is a standalone markup file demonstrating the core technique.

Xxyzcorrupt@gmail.com
74% match
Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt
74% match
Loading thumbnail…

Small Scroll-linked Animation Demo

This demo shows how scroll position can drive an SVG animation, with a clock face rotating on the right side of the screen as the user scrolls through explanatory text panels. The page uses a fixed container with a scrollable div, and JavaScript event handlers track `scrollTop` values. A `requestAnimationFrame` loop updates the rotation of the hour and minute hands, mapped through a `d3.scale` function. The code uses D3.js for SVG manipulation and includes a `window.resize` callback to recalibrate the scale domains responsively.

AAjayyy
74% match
Loading thumbnail…

Small Scroll-linked Animation Demo

This example demonstrates scroll-linked animation, where the vertical scroll position of a container drives the rotation of a clock graphic rendered in SVG. As the user scrolls through text panels, a D3.js scale maps the container’s `scrollTop` value to rotation angles for the clock’s hour and minute hands, updated via `window.requestAnimationFrame`. The code uses D3 3.5.5 to create SVG elements, handle scroll and resize events, and synchronize the animation with the narrative’s pacing, which is set using viewport-height units.

Aandrewdblevins
74% match