search

ffoodd / chaarts

Charts with HTML & CSS
https://ffoodd.github.io/chaarts
MIT License
126 stars 6 forks source link

Handle transition + animation #5

Open ffoodd opened 5 years ago

ffoodd commented 5 years ago

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 commented 3 years ago

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 commented 1 year ago

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 commented 9 months ago

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