Delayed transitions / animations

[techniq]

• Delayed / Staggered (line, bar, etc)
• Bar chart race
• One-to-many line chart transition
• Line transition
  • D3 path transition
• Animated transition of y-axis scales
• Pie to stacked bar transition
• Scale transition
• Smoother area transitions under a series line
• Animated line chart

[johanohly]

The first example is exactly what I am looking for!
What would you say the status is on transitions?

[techniq]

Hey @johanohly 👋, thanks for checking out LayerChart.

Have you seen these examples:

• Bar/Column Charts
  • https://www.layerchart.com/docs/examples/Columns#tween_on_mount
  • https://www.layerchart.com/docs/examples/Columns#stagger_tween_on_mount
  • https://www.layerchart.com/docs/examples/Columns#grouped,_stacked,_or_both_(transition)
• Area Charts
  • https://www.layerchart.com/docs/examples/Area#clip_tween_on_mount (3 examples)

I plan to integrate animations/transitions into the "simplified charts" more (BarChart, LineChart, etc), but you can override slots (such as marks) to accomplish the same thing now.

[johanohly]

Oh perfect, I must have missed those examples.

Thank you for creating this awesome library! The amount of examples is (clearly) overwhelming 😅

[techniq]

@johanohly Very welcome 😁. I just added the bar stagger example today (as it was one I hadn't realized was missing). There is a lot of space to explore with transitions / animations, but definitely have some progress.

[johanohly]

I have my area charts animating how I want to, but I can't figure out how to animate a pie chart other than the very basic parameters of CircleClipPath. I preferably want something like this:

[techniq]

https://www.layerchart.com/docs/components/Pie#tweened

More work is planned as well. #120

[johanohly]

layerchart.com/docs/components/Pie#tweened

More work is planned as well. #120

Oh, I remember looking at that example and wondering why it wasn't animating or had a button to trigger it. It animates before you scroll down to it when not linked directly, thank you again.

[techniq]

Welcome 😁. Yeah, I need to add a show/hide toggle. Btw I started a branch to improve Pie/Arc animations a few months ago, but never finished as it required more thought on some scenarios.

[techniq]

Added a show/hide toggle for the example.

CleanShot.2024-10-29.at.08.03.23.mp4

[johanohly]

Added a show/hide toggle for the example.
CleanShot.2024-10-29.at.08.03.23.mp4

Awesome, this animation is more than sufficient and thanks again for the help!