WAPG 6 SVG Animation Programming SMIL JavaScript CSS

Learn SVG animation techniques using animation elements(SMIL), JavaScript and CSS.

[seemsas]

I like the menue you created. Thanks for your tutorials

[sentient]

I love these type of tutorials, they spark creativity. I'm thinking of exporting an .svg file from my vector graphics program and maybe see if i can animate that

Nice video Adam :) I don't suppose you would make a video tut on how to make a video preview on hover would you? to like skip frames so that its not a continuous playback and also muted audio just to give an idea if a video seems like it is something one would want to watch?

[tiolame]

Maneiro essa mano e muito bom. Ja aprendi bastante com vc!!!

[billabong]

I have an SVG file which contains layers of irregular 'path' shapes(like a floor plan, but way irregular). I used Adobe Illustrator to create the shapes and place it in different layers. I want to fill it with different colors(e.g. black, grey, pink, etc..). But to set up the color I also want to have buttons for the different colors. So when I click the 'Black' button and click ashape on the SVG, it fills up color 'Black'. When I click another color button and click another shape it fills up the corresponding color. After filling up the different shapes. I want to save the corresponding filled up shapes into the database by using AJAX to MYSQL Database. And when I want to load the SVG of the previous state I will just make a query to what shape will be filled with what color.

Are these possible?

[johnnypatino]

Please, how to make a circle to grow?

[mathewi]

I can't see the difference between and css @keyframes or transition, both of them rendering not that great. As far as I know, requestAnimationFrame() should use less cpu and gpu resources, isn't it?

[dhsbg]

I am looking for "Building a WYSIWYG Rich Text Editor Textarea Replacement Part 1" and the rest of all videos of this tutorial. Somehow, I got part 1 and 2 only.

[V.Z.]

This is very basic "animation". Do you have any experience in vector animations? What I mean, say you want to draw a triangle, instead of animate a triangle moving along the page. In my days of Java Graphics, I'd probably use a Timer and add a listener and draw in segments... but I don't know how that's done in javascript, probably the same way? I see a lot of jQuery out there and frankly I'm not a fan of jQuery and AJAX (hijacking code for a box of thrifty functions). Is a drawn object on CANVAS just as scale-able as an SVG graphic? I don't know. I know the difference between an image and an SVG though. I'd really like to see a nice animation :)