SVG animation

[NickWoodward]

Just thought I'd say I've been tracking Carl's svg lessons knowing that I should do them at somepoint, but this first mini project I just got by email looks quality.

That is all.

(Well except Carl, is there any chance one of your projects involves zooming into svg backgrounds?)

I swear he didn't pay me for this 😄, but I feel like this series is morphing into somthing I should do, and I *hate* svgs

**Edit: creativecodingclub.com 👍

[Rodrigo]

Yep, @Carl is a living legend in GreenSock land, a great influence for most of us around here and an excellent teacher.

 

2 hours ago, NickWoodward said:

Well except Carl, is there any chance one of your projects involves zooming into svg backgrounds?

Since we are doing requests: Carl can the Unfortunate Chicken 🐔 make it into the lessons, or is still recovering from the bomb and brick incidents?

[Carl]

Hi @NickWoodward

 

Thanks so much for the kind words.

 

Yes, I highly recommend you dive into the SVG Animation lessons. Can't believe I have over 20 of them already.

 

Here's the demo from this week

 

See the Pen JjvyKPZ by snorkltv (@snorkltv) on CodePen

 

And if you want zooming backgrounds, definitely check out the recent lesson on viewBox!

 

See the Pen rNvYVxX?editors=1010 by snorkltv (@snorkltv) on CodePen

 

 

As far as the chickens that @Rodrigo mentioned you can get a peek at these old tweets (made in Animate)

 

 

 

Rodrigo you get ⭐⭐⭐⭐  for remembering projects from 2018!

Great having you back around the forums, buddy. 

I enjoy reading your clever solutions!

 

[NickWoodward]

On 9/24/2022 at 6:28 PM, Carl said:

And if you want zooming backgrounds, definitely check out the recent lesson on viewBox!

This is awesome, thanks!

[Cassie]

Yeah I've been loving the SVG lessons! Really great stuff!

[Carl]

Thanks so much, @Cassie! 

[mvaneijgen]

Oh is this the we are praising @carl topic? Let me chime in! Great stuff on the SVG lesons, having working with SVGs for a few years now and still learning new stuff! The only downside is that in my YouTube feed I see a new video only to already have watched them on creativecodingclub.com, happened to me this morning! 🤣

[Carl]

@mvaneijgenHa. Yeah, I'm going to be or atleast I keep saying that I am going to be putting more lessons out on youtube so brace yourself for some more videos you may have already seen.

 

I appreciate all the support! One of these days I'm going to quote you

"Working with SVG on the web requires some elbow grease to get the files really clean."

 

So much truth in there!

 

I'm getting into my dreaded preserveAspectRatio lesson but I think I found some ways to keep it simple and have it make sense.

Stay tuned!

 

 

[Cassie]

Sure you have it covered, but it's fun to discuss.

Simplest thing I've found is a direct comparison to background-size and background-position. That seems to click for a lot of people. That and making it clear what the SVG element bounding box is as opposed to the viewBox.

I have a little UFO in my workshop and I make people float it to the top/bottom left/right to get used to the values.

[Carl]

thanks for the assist, @Cassie those are lovely illustrations.

 

I'm currently working on showing folks how to fit a very tall and thin monster into a square or variable size viewport.

 

 

Yes, the background-size metaphor is very helpful and I have a reference to it in there. Not sure where I heard it first but maybe it was you!

 

Thanks so much!

 

Carl

 

 

[Cassie]

Ahh I love him, that's a fun exercise!

[NickWoodward]

As your new PR manager I just thought I'd ask - is this course under construction, as in more future episodes will be available (obviously), or will previous episodes inject themselves into the timeline (so I might miss some in the sequence if i complete them now)?

 

Had a few beers and thought "what better time to fight a viewBox?" (I've literally had a days-long-bug based on the capitalisation of view'B'ox 😄)

[NickWoodward]

Also, as your PR manager, your favicon really should be (genuine feedback, your favicon doesn't really stand out right now)

[Carl]

On 9/30/2022 at 7:37 PM, NickWoodward said:

is this course under construction, as in more future episodes will be available (obviously), or will previous episodes inject themselves into the timeline (so I might miss some in the sequence if i complete them now)?

 

The course is still under construction and I'm going to be actively adding to it for the next few months.

However, with the viewBox, viewport and preserveAspectRatio stuff out of the way I feel like i have provided an extremely firm foundation of the basics.

 

There is enough there (23 lessons) to keep you busy prepare you for the more advanced things I have in store. Although I may still have a few easy lessons that could fall into the "basics" section it's not like its going to mess you up. It's not like there's really any proper or any 1 concept is all that much harder to understand than another. 

 

Soon I'll be getting into more interesting things like dynamically creating svg elements, animating filters, gradients, morphing, masking etc etc.   

 

Short story. Jump in now. No harm.