Streaming live at 10am (PST)

Animated charts and graphs


#1

Hello,

Does anybody know how to create a similar effect like this one for charts and graphs? http://www.skilltechwebdesign.com/edge-animate/advanced-animated-skillbars-v1/


#2

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


#3

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. smile


#4

Here you go @paulmalabanan smile


#5

This is great! Thank you so much.


#6

Thanks @paulmalabanan I went ahead and made some updates to it, now it is responsive as well. 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) smile

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

Thanks,

Waldo smile


#7

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