I’ve created an SVG element in my “Statistics” section on my homepage that I would like to turn into a CMS element at some point for it to be editable by my client.
Here’s an idea of what I want the final design to look like:
Basically, I want to be able to change the percentage inside the circle and then have the blue path reflect that percentage (i.e. if 50%, then have the blue line cover half the circle), all within a CMS format and without having to change the embedded code.
Is this even possible in webflow? If so, how would I go about creating this sort of thing?
Thanks!
You can make an animated SVG (lottie) and the have it stop at various points of progress. Or you can have multiple SVGS in a multi image field in the CMS item(or multiple cms items) and then your user can pick which one is visible. I think in case u want it to be editable in editor (rather then designer) you would go with multiple cams items each containing one image of different progress and the your user can decide which one of the cams items is visible.
Thanks for the idea. I’ll try making multiple SVGs, however it seems as though I’d have to make a lot of them for the client to have enough possibilities (the percentage will change every week).
Do you think it might be possible to do something with some custom code for the SVG path to update itself automatically when the percentage within the circle is changed? Thanks again!
so if you make an animated SVG (lottie) with the animation running from 0 to 100% (pretty easy) then you could use custom code to have the animation stop at a different point each time - and then link it to some input field on the website… albeit this would involve some doing (vis-a-vis custom code) but I certain it can be achieved…
and if you go the route with multiple SVG images - all you really will need to do is have one collection and then have the user update a filter so that it shows only one particular image… that is it will take lets say to have 100 svg images and the filter will show only one with the number that is updated in a filter… and it shouldn’t be to hard to do since you can make the animation and export the frames all at once… and then the user can update it (pick the correct percentage) in the editor him/her self…
So I think I’ve understood what you’ve described, however I’m not sure how to implement your suggestions (please forgive me, I’m very new to webflow and web design in general).
Do you know of any examples or tutorials of either of the methods you’ve suggested? Thanks!
Whichever option you think is best. Although perhaps the CMS picker would be the better option as I don’t have any animation experience. Thanks agains!
so thats pretty simple - Once you have all your images, you make one collection and make 100 posts with in it with a title that corresponds to the percentage of completion for each item in the collection then in the location where you want the image displayed you add a collection. Filter it by the title and limit to showing only one result… thats it…
Have a look at this - there are some other options available
As for ease of use - it shouldn’t be too hard - you’ll need to find a cdn source but most of this stuff is available, then read the documentation and paste the script into the custom code section - the only tricky part will be to have it so your client can control it… maybe you can do the collection trick but so that the visible item will trigger the script to go to the correct progress… need to think what would be the best way to do it…
What would be a decent cdn source that would incur no extra cost (the client isn’t very willing to pay for extras, hence why I was trying to make the SVGs built in at first). Thanks!
