From dylantarre-animation-principles
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.
| Principle | Data Viz Implementation |
|---|---|
| Squash & Stretch | Bar overshoot, elastic settling |
| Anticipation | Brief pause before data loads |
| Staging | Sequential reveal, focus hierarchy |
| Straight Ahead / Pose to Pose | Streaming vs snapshot data |
| Follow Through / Overlapping | Staggered element entry |
| Slow In / Slow Out | Smooth value interpolation |
| Arc | Pie chart sweeps, flow diagrams |
| Secondary Action | Labels following data points |
| Timing | Entry 300-500ms, updates 200-300ms |
| Exaggeration | Emphasize significant changes |
| Solid Drawing | Consistent scales, clear relationships |
| Appeal | Satisfying reveals, professional polish |
Squash & Stretch: Bars can overshoot target height then settle. Pie slices expand slightly on hover. Bubbles compress on collision. Keep total values accurate—animation is transitional.
Anticipation: Brief loading state before data appears. Slight shrink before expansion. Counter briefly pauses before rapid counting. Prepares user for incoming information.
Staging: Reveal data in meaningful sequence—most important first. Highlight active data series. Dim unrelated elements during focus. Guide the data story with motion.
Straight Ahead vs Pose to Pose: Real-time streaming data animates continuously (straight ahead). Dashboard snapshots transition between states (pose to pose). Match approach to data nature.
Follow Through & Overlapping: Data points enter with staggered timing. Labels settle after their data elements. Grid lines appear before data. Legends animate with slight delay.
Slow In / Slow Out: Value changes ease smoothly—no jarring jumps. Use d3.easeCubicInOut or equivalent. Counter animations accelerate then decelerate. Progress bars ease to completion.
Arc: Pie charts sweep clockwise from 12 o'clock. Sankey diagram flows follow curved paths. Network graphs use force-directed arcs. Radial charts expand from center.
Secondary Action: Tooltips follow data point movement. Value labels count up as bars grow. Axis tick marks respond to scale changes. Shadows indicate data depth.
Timing: Initial entry: 300-500ms staggered. Data updates: 200-300ms. Hover states: 100-150ms. Filter transitions: 400-600ms. Slower timing aids comprehension.
Exaggeration: Significant changes deserve attention—pulse or glow outliers. Threshold crossings trigger emphasis. Anomalies animate more dramatically. Don't exaggerate the data itself.
Solid Drawing: Maintain consistent scales during animation. Transitions shouldn't distort data relationships. Preserve axis alignment. Visual hierarchy must remain clear throughout motion.
Appeal: Data entry should feel satisfying. Professional, purposeful motion builds trust. Avoid gratuitous animation—every motion should aid understanding.
// Staggered bar entry with easing
bars.transition()
.duration(500)
.delay((d, i) => i * 50)
.ease(d3.easeCubicOut)
.attr("height", d => yScale(d.value))
.attr("y", d => height - yScale(d.value));
// Smooth data updates
bars.transition()
.duration(300)
.ease(d3.easeCubicInOut)
.attr("height", d => yScale(d.value));
// Animation configuration
options: {
animation: {
duration: 500,
easing: 'easeOutQuart',
delay: (context) => context.dataIndex * 50
}
}
| Visualization | Entry | Update | Hover |
|---|---|---|---|
| Bar chart | 400ms stagger | 300ms | 100ms |
| Line chart | 600ms draw | 400ms | 150ms |
| Pie chart | 500ms sweep | 300ms | 100ms |
| Scatter plot | 300ms stagger | 200ms | 100ms |
| Dashboard | 500-800ms cascade | 300ms | 150ms |
Always respect prefers-reduced-motion. Data visualization animation should aid comprehension, not hinder it. Provide instant-state fallback for users who disable motion.