@mattmcs@sabanna I think more interesting is the very subtle highlight effect on the video of the cms page, where a highlight runs across it, I think it could…? be achieved with a series of interactions and a div with an opacity gradient but the rotation makes it difficult…
Just noticed the video also has a play button and outline which change colour so that has to be a video/gif, it just wouldn’t make sense to have loads of colours and cycle though them in interactions.
i’ve never tried any process. I have previously worked with svg on video scribe, so i was thinking if it’s possible to create same animation effect on svg in webflow or something similar. do you have a short tutorial on how i can work with svg on webflow?
You can indeed use inline SVG with Webflow and it’s kind of very practical and effective.
Here I use a custom code widget to paste both SVG code and a “mini” CSS. See how the third icon has a lighter opacity and stroke width. I added a class to a group (<g> element) and target this class with CSS right underneath. As edits appear right away in Webflow preview, it’s as easy as it looks in the image.
WF is not yet really SVG ready but this is surprisingly easy to do. I’ll post again – later – details of the same experiment using the CVG element, it allows to declare SVG code somewhere and then create instances of it.
Edit: I’ll try to publish the page above in the sandbox tomorrow. Icons shown are from Webalys’ Streamline collection. Very high quality icons, and the code is consistant so you don’t have to deal with a new SVG hierarchy for each icon (it can happen with some other collections and it makes the work a bit tedious.
Edit2: worth mentioning that if you edit your SVG icon code, add classes and juste save it as a SVG file, then use it as an image in Webflow, it will NOT work. You can’t target a class in an SVG file with CSS, at least not by default. However, if you ceate an interactive SVG file with animations etc. and use it as an image in Webflow, it will animate and react very well, as a standalone component.
Edit3: would it be a good idea for Webflow to be the first live editor to extensively support SVG, allowing us to visually alter the hierarchy of objects, add classes and CSS properties, and be able to animate the properties using the states and the Interactions? Absolutely! I’m convinced and if you are too, don’t hesitate to test the experiments above and ask for SVG support in the forum Whishlist category
I will. I have massively deployed SVG files on clients sites for 15 months, sites who get a lot of traffic from all around the world in a lot of various conditions. And it’s always well supported. I recommend it!
Don’t wait for my page to start because it’s very simple to reproduce… take a few minutes. SVG files can be opened in a text editor and from there, add a class and copy the code as the image shows.
you have been very helpful, i’ll check this out now. But the only way i can make svg animated is using video scribe for example and the output is not svg but mp4 video files. how do you animate svg and it still remains svg?