Jump to content
GreenSock

NickWoodward

SVG animation

Recommended Posts

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

**Edit:
creativecodingclub.com 👍

  • Like 4
Link to comment
Share on other sites

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? :D

  • Like 3
  • Haha 1
Link to comment
Share on other sites

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!

 

  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Thanks so much, @Cassie

Link to comment
Share on other sites

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! 🤣

  • Like 3
Link to comment
Share on other sites

@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!

 

 

  • Like 3
Link to comment
Share on other sites

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.

image.png

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

 

398505178_ScreenShot2022-09-29at4_42_32PM.png.26b90dbf4b1bb4369021e7dad31fd7fe.png

 

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

 

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×