Streaming live at 10am (PST)

Smooth SVG animated rotation for irregular shape possible?


#1

Hi,

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?

The graphic is on the home page of https://preview.webflow.com/preview/jsd-test?preview=427c8cb9261e1a8016ae0accc11dff7a

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.

Thanks,

John


#2

Actually rendering in Firefox is better than Chrome, also looks good on mobile, must be specific to chrome rendering that is a little off.


#3

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:

https://wishlist.webflow.com/ideas/WEBFLOW-I-87


#4

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.

Thanks for coming back to me,

John


#5

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?

Thanks again,

John


#6

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 :smiley: Video here:


#7

FYI that’s also how you reuse an interaction. Here I rebound it to the same classe but I could decide to bind it to a new one.


#8

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 :slight_smile: Anyway, thanks for the comprehensive support on this, appreciate it.


#9

That’s my fault for considering anyone knows the short 'IX2" for Interactions 2.0 :slight_smile: We also say IX1 or IX Legacy for Interactions legacy.


#10

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.


#11

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