Basic Bar Chart

[Brandon Rudy]

I am looking to add some basic, animated bar charts to a url in codepen. I am doing a basic infographic comparison between LeBron James and Michael Jordan. What would be the easiest way to make two simple animated bars replicating throughout the page a couple of times?  I am trying to fit the bars in between the picture that I have in the code above. Thank you for the help.

See the Pen poNWBwp by brandonrudy (@brandonrudy) on CodePen

[tailbreezy]

Hello Brandon,

 

Would love to help. Maybe build something with gsap and if you have any trouble, we can address it.

Right now your code doesn't even have javascript.

[ZachSaucier]

Hey Brandon, welcome to the GreenSock forums.

 

I recommend building the bar charts in their finished (end) state and then plugging in GSAP (perhaps along with ScrollTrigger) to animate them to those values when you need to. You could make the bars in HTML, SVG, Canvas, or even WebGL but HTML + CSS would probably be the simplest.

 

The Getting Started article is a great place to start:

 

[Brandon Rudy]

Hello Zach and tailbreezy,

 

I now have what I was looking to do. How can I make the bars below animate like I did for the first one with those correct percentages

[PointC]

I'm guessing you mean you'd like to animate the bars as they come into view? If so, you should go through the ScrollTrigger docs and demos.

https://greensock.com/st-demos/

 

Happy tweening.