Streaming live at 10am (PST)

(resolved) SVG Line animation testing


#1

Hi Guys

I wondered if one of you could give me a quick hand?

I'm trying to duplicate this codepen in webflow: http://codepen.io/anon/pen/jPYEzg

So i've added the SVG code as an embed, and added the CSS styles in header customer code.........the SVG is displaying but not animating frowning

Here's the public site too: https://webflow.com/website/svg-animation-test?s=svg-animation-test

Am i missing something really obvious???

Thanks smile


#2

Cancel that - 15 minutes of playing with CSS and i've sorted it!


#3

Call me stupid, I do a ton of vector art, but have never done animation in svg.

What/how did you animate it?

FBM


#4

I think what he meant is "a svg animted with webflow interaction"

However, svg is not just a vector image, it can contains hover states and stuff and animations. You can open svg in a text editor, add classes to objects to use CSS to modify their colors, shape, to animate.

Look here http://svgcircus.com/

This is a SVG, only a SVG file:

http://vincent.polenordstudio.fr/snap/test.svg


#5

Just WOW...

TY Vincent.

I do plain Vector, I need to read on animating svg.

Thanx for the links man.

FBM


#6

Inkscape is an invaluable tool to work with SVG:

https://inkscape.org/en/

Recently I did a little fun experiment with SVG and Webflow, I'll find time to make it nicer to publish it in the sandbox but here are screen captures and desc.

  • I get a SVG icon, here from my Webalys' Streamline bank
  • I open the SVG in a text editor and add some class names to elements, then I paste the code into an HTML widget like this (I highlighted the part I added "class="name"")

  • now I got this result:

  • now I can add, in the same HTML widget code, some custom CSS to alter some aspect, especially color, birder color and border thickness.

And that's very cool. And in a way or another I hope we'll get this kind of control within Webflow one day.

And SVG contains way more things than what I master and even things I don't know about (:


#7

@vincent - nice!

I've been playing with SVG line animations this morning: http://svg-animation-test.webflow.io/

It's literally just an inline SVG (pasted into an embed) and a little bit of CSS in the header, but it works pretty well for what I need. I did try messing with some Javascript libraries to render the animation but it was far too complicated!


#8

Does the css needs to be in the header? have you tried to let it in the same html box than the svg code? Which I found is very convenient...

PS LOL, I'm going to buy this exact fisher price toy this weekend (:


#9

I've not tried putting it in the same box - might give it a shot!

hahahaha i've already got a Fisher Price turntable for my son: his introduction to the world of records smile


#10

That's a wonder piece of analog fun (: they are re releasing the 16mm anim camera too


#11

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