This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josh Max Rubinstein
Posted Jan 26 - Read on Facebook

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?

http://share.framerjs.com/k5k1s918q7s3/

5 Comments

Josh Max Rubinstein

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.

Jonas Treub

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.

Jonas Treub

Otherwise you will have the change both the height and y property.

Tudor Munteanu

Set element.y for all with a fixed value, then animate the y property like this: y : element.y - end_height

Ben Rodenhäuser

You can also listen for height changes and keep the maxY of your elements fixed: http://share.framerjs.com/fx3330sc0m6r/

Read the entire post on Facebook