Non-Computed Style Tween

100%

Non-Computed Style Tween

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Oct 9, 2013

This example demonstrates how to animate a non-computed style property using D3 v3’s transition system. It changes the page background from brown to steelblue to black over two sequential 750-millisecond transitions. The code defines a custom `styleTween` function that calls `transition.styleTween` with `d3.interpolate`, reading the current style value directly from `this.style[name]` instead of relying on computed styles. This approach keeps the tween targeted and efficient, showing a pattern for interpolating inline CSS values during animations.

AI-generated description

An example of using transition.styleTween to avoid using the computed style value, and instead use the style value as-set.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

selection-multi and transition rollup

This example demonstrates a D3.js animation that highlights the interplay between chained `.styles()` and `.transition()` methods on selected elements. Two `<h1>` headings are styled and animated in sequence: the first applies a red centered style, then transitions its color to steelblue over one second; the second starts invisible and fades in over another second after a delay. The visualization—essentially a minimal proof-of-concept—uses a custom bundling of d3-selection-multi and d3-transition to show how multi-property style and transition methods can be combined, with a note on the required prototype patching for transition chaining. The page renders text-only, with no charts or data, and relies on animation to demonstrate the effects.

11wheel

71% match

Loading thumbnail…

Chained Transitions

A dense field of 4,002 small square divs cycles through a three-step color transition from light gray to steel blue to orange and back to gray. The chained animation is built with d3.v4 and the experimental d3-transition API, using `d3.active` to reselect elements and `styleTween` to interpolate RGB colors via `d3.interpolateRgb`. Each transition is delayed, with a recursive `repeat` callback restarting the sequence indefinitely.

Mmbostock

71% match

Loading thumbnail…

Immediate Transitions

This example demonstrates how to force D3 transitions to complete instantly by overriding `requestAnimationFrame` and `Date.now`. The code uses D3 v3’s `d3.select("body").transition()` with a five-second duration to animate the background to red, but then intercepts animation frame scheduling and advances the clock to infinity, causing the transition to jump immediately to its final state. The browser’s animation loop is bypassed, and the synchronous flush executes all pending callbacks at once.

Mmbostock

70% match

Loading thumbnail…

Animation Practice

A blue div demonstrates chained D3 transitions, changing background color to green, fading to transparent yellow, then returning to full opacity over three 3-second stages. Using D3 v7’s `transition`, `duration`, and `style` methods within `index.js`, the animation runs on page load via `main()`. The example shows basic sequencing without data, relying on SVG-free DOM manipulation and the `d3.select` API.

Aadventuresenglish.info@gmail.com

70% match

Loading thumbnail…

Transition Speed Test

This example demonstrates the speed of D3’s transition engine by animating a 48×48 grid of small square divs from white to black. Clicking the button triggers a one-second transition on all 2,304 elements simultaneously, changing their background-color and outline-color. The code uses d3.select, d3.range, and transition().duration().style() to apply the animation, responding to a click event on a button. The grid is rendered as HTML divs styled with CSS floats, and the transition is built entirely with D3 v3, avoiding jQuery or CSS-only approaches.

Mmbostock

70% match

Loading thumbnail…

Named Transitions

This example demonstrates concurrent transitions on a single SVG path by using named transitions in D3 3.5. A black cross-shaped symbol, rendered with a red stroke, rotates continuously via the “twizzle” transition while its stroke width pulses with the “plonk” transition. Each animation uses `transition.attrTween` and `transition.style` with `d3.interpolateString`, and recursively reschedules itself with `each` and `transition.duration` to create an ongoing, non-interfering loop.

Mmbostock

69% match

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

68% match

Loading thumbnail…

Text Transition II

A randomly generated integer fades in and out inside a large headline, replacing itself with a new value on each cycle. The example demonstrates a text transition technique that uses `d3.select` and `d3.transition` to create a repeating animation. On each start event, `d3.active` removes the old heading while a new `h1` element is appended, initially transparent, and its opacity is tweened from 0 to 1 using the `style` method. The process repeats indefinitely with a 1.5-second delay, showcasing D3’s ability to manage enter, update, and exit sequences for text elements.

Mmbostock

67% match