Animated charts and graphs

Hello,

Does anybody know how to create a similar effect like this one for charts and graphs? Skilltech |  Animated Skill Bars | Edge Animate

Hi @paulmalabanan,

You can create an interaction for this, using multiple divs and triggering an interaction with multiple trigger steps, each step targeting a different div.

Check out our interactions page to see the kind of effects possible (a small sample): http://interactions.webflow.com

If you have some extra time, please make a tutorial request for this here: http://forum.webflow.com/c/tutorial-requests.

Cheers,
Dave

1 Like

Hey @paulmalabanan I’ll gladly make a how to on making animated charts & graphs this evening. :smile:

They’re really fun and easy to make. I’ll also make a cloneable project for you to play around in. :slight_smile:

3 Likes

Here you go @paulmalabanan :smile:
http://forum.webflow.com/t/cloneable-charts-graphs-loading-bars-template-how-to/13808

6 Likes

This is great! Thank you so much.

Thanks @paulmalabanan I went ahead and made some updates to it, now it is responsive as well. :slight_smile: I’ve done some other fun things with loading bars as well like making this fun train animation on my sandbox site. :smile:
http://subwayload.webflow.io/

The subway is built with all css & interactions, as well as a little SVG inside the subway doors (activated on hover or tap) :slight_smile:

Please feel free to ask any questions or let me know how you put it to use :smiley:

Thanks,

Waldo :smile:

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.