(resolved) SVG Line animation testing

Design help General
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 :slight_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

2 Likes
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:

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””)

http://vincent.polenordstudio.fr/snap/c84by.jpg

  • now I got this result:

http://vincent.polenordstudio.fr/snap/j82bh.jpg

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

http://vincent.polenordstudio.fr/snap/mrsxh.jpg

http://vincent.polenordstudio.fr/snap/wbtb8.jpg

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 (:

1 Like
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 :slight_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.