I am having the darnedest time figuring out how to animate my bar chat element heights from the bottom up rather than the top down.
I am also trying to use the cycle utility to stagger the animation of each bar in the chart.
Anyone have any suggestions for me?
I was able to fix the animation delay "delay: 0.05 * index" but I am still very stuck on animating the bar graph from the bottom up.
If you use scaleY and set the originY at 1 (bottom) you get the best performance during the animations. Scale is rendered by the GPU.
Otherwise you will have the change both the height and y property.
Set element.y for all with a fixed value, then animate the y property like this: y : element.y - end_height
You can also listen for height changes and keep the maxY of your elements fixed: http://share.framerjs.com/fx3330sc0m6r/