I am animating an SVG irregular line (a face profile) and the quality of the line is jagged or anti-aliased on rotation. Is there a way to make this line completely smooth? Is it do with a shape-rendering property and crisp edges?
Press the eye icon to preview the loaded site to activate the animation.
Also as an aside, has webflow been updated to allow styling of SVGs in the UI at this stage? I see there are some older posts that I will read through for workarounds, just wondering if there have been any recent improvements. Thinking specifically about controlling line weight and colour.
If you use inline SVG (SVG as custom code), your anim still works (use the same classes and rebind in IX2), and you get some control over the styling of the SVG. As it’s all CSS, you can see the effects right in the designer.
Adding styling control in Webflow would not be so evident. In CSS you can’t target and style a linked SVG file. The code has to be inline. Merging SVG code with a page code is a bit tricky. SVG are written by apps in a million different ways and contains all kind of stuff.
So if you like working with SVG (like me), work on a good workflow outside of Webflow, and vote on this important ticket so we can update our images easily:
Hi Vincent, thanks for that, very interesting, I hope I can use this to control the stroke of the SVG and keep it to the same value regardless of the responsive scaling of the SVG.
I haven’t done this before but with a quick google it seems I can export SVG code from Pshop and then add to a custom code element. Will have a go, seems like a great solution.
Hi Vincent, sorry quick question, I don’t know what “rebind in IX2” means, I think this means connecting the webflow classes to the custom code but not sure how to go about this. Is there a tutorial I could follow for this?
it means once I had deleted your 2 images and replaced with 2 custom code widgets, and affected the classes of the images to the custom code widget, I had to open your interaction and tell it again what to affect. There was a red indicator, then I selected target class and typed in the class to target.
That’s what I called re-bind the interaction, because it got lost at a moment Video here:
Hi Vincent, thanks for the excellent support, feel like a bit of a dummy now! For a moment I thought IX2 was a developer phrase of some sort Anyway, thanks for the comprehensive support on this, appreciate it.
Hi Vincent, sorry for hijacking this thread with another issue but I posted about this in Interactions and a lot of people have looked at it but no responses.
Is it possible to trigger an interaction which performs an animated sequence and then moves the user to another page when the animation is finished? There is no option for this in webflow but I wondered had you ever come across a workaround?
A mouse click triggers an animation and once finished takes the user to another page.
Video here:
Anyway, thanks for the comprehensive support on this, appreciate it.