Brandon Rudy Posted February 22, 2021 Share Posted February 22, 2021 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 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 22, 2021 Share Posted February 22, 2021 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 22, 2021 Share Posted February 22, 2021 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: Link to comment Share on other sites More sharing options...
Brandon Rudy Posted March 1, 2021 Author Share Posted March 1, 2021 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 Link to comment Share on other sites More sharing options...
PointC Posted March 1, 2021 Share Posted March 1, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now