chaarts icon indicating copy to clipboard operation
chaarts copied to clipboard

Handle transition + animation

Open ffoodd opened this issue 7 years ago • 3 comments

Most properties in charts are animatable — clip-path, I'm staring at you.

There shouldn't be any issue with transition handling (on value change, for example, or on intersectionning viewport).

So I think it should be tried :)

ffoodd avatar Dec 13 '18 12:12 ffoodd

Mention to self: in my Paris Web 2020 talk about custom properties (slide 16/19), I implemented transitions on clip-path() for radar charts. So the same is doable with radar charts at least, and maybe line charts too.

As mentionned in #44, we may also trick the eyes by animating backgrounds at some point, since grid-related properties aren't animatable.

ffoodd avatar Nov 13 '20 12:11 ffoodd

I can't make this work on pie charts for now: @property is needed to make a custom property animatable (by specifying its type) but Firefox doesn't support this (for now, announced in Nightly ATM) and switching values in mask-image or clip-path currently doesn't work as intended in Chromium…

To be tried with other chaarts types!

ffoodd avatar Oct 17 '23 20:10 ffoodd

Animate background-position for line and column charts, maybe?

ffoodd avatar Feb 04 '24 20:02 ffoodd