Interpolate anything with React Motion

100%

Interpolate anything with React Motion

✓ Published0🌍 Public

Last edited Oct 11, 2018

Created on Oct 11, 2018

This example shows how React Motion can drive an interactive color and text animation. When the user presses and holds the central area, a single interpolated value `t` animates from 0 to 1, causing the background to transition between two colors and the text to shrink while displaying the progress as a percentage. The code uses React Motion’s `Motion` and `spring` components for the animation, and d3’s `d3.interpolateHclLong` to create the color interpolator, while `d3.format` formats the numeric value. The rendering relies on React’s virtual DOM, with event handlers for mouse and touch input.

AI-generated description

React Motion's interpolated styles are just arbitrary values and don't have to map to actual CSS styles.

In this example, only a single value t is interpolated by React Motion from 0 to 1 when the mouse is pressed, and passed to an color interpolator created with d3-interpolate. Additionally, it's used to scale the text and to display a percentage.

forked from <a href='http://bl.ocks.org/herrstucki/'>herrstucki</a>'s block: <a href='http://bl.ocks.org/herrstucki/27dc76b6f8411b4725bb'>Interpolate anything with React Motion</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

69% match

Loading thumbnail…

Hello React + D3!

This example demonstrates a reusable React component that integrates with D3 to render animated SVG graphics. Dynamic data updates every second, repositioning circles while diagonal lines are redrawn to follow the resizing viewport. The code uses D3 v4 transitions for smooth attribute changes, React's lifecycle methods (`componentDidMount`, `componentWillUnmount`) for setup and cleanup, and a `setInterval` to update the visualization. It also responds to window resizing and keyboard input to toggle the graphic's visibility.

CCurran Kelleher

68% match

Loading thumbnail…

Input Value Interpolation

This example animates the value of an HTML range input from 0 to 255 over 7.5 seconds, visually demonstrating how a transition can interpolate a DOM property. It uses a custom `valueTween` function that returns a closure over `d3.interpolateNumber`, which computes the numeric interpolation between the input’s current value and the target. The transition, chained via `d3.select("input").transition()`, applies this tween to the `value` attribute, updating the slider’s position in real time. The page includes no external data, relying solely on D3 v3’s transition and tween APIs.

FFrissAnalytics

68% match

Loading thumbnail…

Input Value Interpolation

This example demonstrates D3's ability to animate an HTML input element’s value through a custom transition. A single range slider animates from 0 to 255 over 7.5 seconds after a 1.5-second delay. The visualization uses a custom tween function, `valueTween`, which relies on `d3.interpolateNumber` to smoothly interpolate the slider’s `value` property. The transition is applied via D3’s `.tween` method, and the slider itself is selected using `d3.select`. The code shows how D3 can manipulate standard HTML form elements, not just SVG.

Mmbostock

68% match

Loading thumbnail…

Transform Interpolation

Two D3 v3 SVG animations demonstrate alternative interpolation of CSS transforms. Left, `d3.interpolateTransform` decomposes transforms canonically, so a transition from "rotate(180)translate(0,-100)" to "rotate(360)translate(0,-100)" animates via a translate-rotate path. Right, a `d3.tween` using `d3.interpolateString` interpolates the raw transform strings, rotating angle only. Each animation cycles with `transition.attrTween` and a recursive `each("end")` handler, with a circle and label centered in each group.

Mmbostock

68% match

Loading thumbnail…

Untitled

A simple HTML page containing a 100-pixel black square is animated inside a React application. The example demonstrates the `d3.transition()` API, which is used to smoothly change the background color of the `div` element from black to red over a duration of 3000 milliseconds. The page imports D3 v4 and uses `d3.select()` to target the container. The rendered output is a basic color transition, with no data input or complex rendering.

Rrchenam

67% match

Loading thumbnail…

Motion

The visualization shows two sets of black circles arranged in a diagonal pattern, with one circle from each set rotating around a fixed point to create a sense of continuous motion. The animation is driven by `d3.timer`, which repeatedly updates the `transform` attribute of the circles using an SVG `rotate` transformation. The rotation angle is calculated from the elapsed time since page load, with one set rotating around the first circle’s position and the other around the fifth circle’s position. Built with D3 v4 and rendered as SVG, the code uses hardcoded coordinates for the circles and relies on CSS classes to select and animate them, creating a simple kinetic composition without any external data source.

CCJKraenzle

67% match

Loading thumbnail…

Text Transition I

A large number in a heading transitions continuously between random values up to one million, using a tween to interpolate the numeric value and reformat it with comma separators via `d3.format`. The animation runs in a repeating loop, with each cycle lasting 2.5 seconds followed by a 1.5-second pause. The code uses D3 v4’s `transition.tween` and `d3.interpolateNumber` to smoothly change the text content, unlike `transition.text`, which only sets the value once.

FFrissAnalytics

66% match