This week I got to speak with Craig Roblewsky! Craig does a lot of web animation and hangs around the Greensock forums quite a bit, giving him a unique perspective on solving animation problems and coming up with clever solutions to them. Craig has his own site, motiontricks.com, as well which is an educational resource for animation. We get into all that, some of Craig’s own favorite Pens, and some of Craig’s other professional history on the show.
Time Jumps
- 00:14 Guest introduction
- 01:55 How did you get started with web work?
- 04:17 Working with Greensock
- 07:10 White on black Pen
- 08:44 What is Motion Tricks?
- 12:22 Simple Fox Morph Pen
- 16:40 Sponsor: Notion
- 18:18 Wavy numbers gauge Pen
- 20:29 Do you use Lottie?
- 22:53 Cursive handwriting menu
- 26:50 Parallax, SVG, Viewboxes
- 29:38 What’s exciting you about the web?
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. CodePen Radio #375. I have a special guest. Maker of many incredible Pens on CodePen, really an animation expert if there ever was one. It's Craig Roblewsky. How ya doin', Craig?
Craig Roblewsky: I am doing great. How ya doin', Chris?
Chris: Good. Good. Good. Yeah. Thanks for coming on the show. Sound great, you know. Not everybody has an amazing microphone and knows how to use it, but the people out there appreciate it, I'm sure.
Craig: Well, we do what we can.
Chris: Yeah. Mr. PointC on CodePen, if you're not following Craig. Of course, the link will be in the show notes. What is PointC anyway? That's a part of your Twitter name too.
Craig: PointC is just a weird little name I gave myself many years ago on a different forum.
Chris: Uh-huh.
Craig: I used to do a lot of video production, and I had to pick a username, and everybody says, you know, you get from point A to point B. I said, "Well, I'll go a little further and we'll go to point C."
Chris: [Laughter] I get it.
Craig: It just stuck from that point. I don't know. It doesn't really mean anything, but my first name is Craig, so the works as well there, too.
Chris: Yeah, totally. Sometimes people's usernames follow them. You never know. They're like, "I don't know. It was my AOL Instant Messenger Name."
Craig: [Laughter] Right. Right.
Chris: Yeah. Why change it now? You know?
Craig: Exactly.
Chris: I always wanted to change CSS-Tricks to something else because it started to transcend that pretty early on in its existence, but I never did get around to it.
You might not have that problem on your website, MotionTricks.com. No dash, unfortunately. [Laughter]
Craig: Well, I do have the dash, but it just forwards to the non-dash.
Chris: Oh, classy.
Craig: [Laughter]
Chris: Yeah, that's great. So, tell me. There are so many things to talk about here. One of them is that you said, "Oh, I do video production," and perhaps still doing stuff. A lot of times, what we know about each other, what I know of people because they're on CodePen, is like, oh, they're a Web person. You know? They do Web stuff. But almost everybody has other stuff they do. You know? In your case, it's running a business.
Craig: I'll give you the quick version.
Chris: Sure.
Craig: I started out as a kid in the late '70s, early '80s. Got a TRS-80 on my desk and fell in love with computers.
Chris: Is that the calculator that you could program kind of thing? Oh, no, not even.
Craig: No, the TRS-80 from Radio Shack.
Chris: Okay.
Craig: One of the first personal computers. Back then, we wrote basic programs and recorded them on audio cassette, so those were good times.
Chris: [Laughter]
Craig: I was in love with computers from a little kid, but there was no Internet at that time or anything, so I just moved into video production because I just love movies and stuff, so I moved into video production. That led to photography, and my wife and I ran a photography studio for about 15 years. We shut that down in about '08, I think, and then I moved back into computers, websites, and things like that.
Chris: Mm-hmm.
Craig: The video production kind of morphed into going away from going out and shooting video to just making animated videos, so that's what we still do. So, my day job is making websites and making animated explainer videos.
Chris: Oh, that's great. That's great, and it's not always -- I mean how often do you get to use Web stuff in the video itself? They're kind of different mediums in a way.
Craig: They very much are. Half my day is building websites. The other half is with the video production, animation, and stuff like that.
Chris: Yeah.
Craig: But we were fortunate enough to make the explainer videos for GreenSock.com, so we can kind of cross....
Chris: No kidding! Really?! You did those? Oh, that's awesome. When they have a new release, the release videos are them, are you?
Craig: No, that one is all Cassie these days. She's amazing at doing that stuff.
Chris: Yeah, Cassie Evans. We've had her on the show, I believe, or at least I've talked to her before. Okay. fascinating. So cool.
You got you. You got your job with your wife making video, doing websites as well through that video, but then also - I don't know - doing creative stuff on the side. You mentioned GreenSock, so that's part of your life as just a fan and forum moderator and just, I'm sure, heavy user of.
Craig: Oh, absolutely. When we got back into websites, it was just HTML, CSS.
Chris: Mm-hmm.
Craig: I didn't really mess with JavaScript a whole lot. I tried that a few times. Got the books out. But it's just sometimes a JavaScript book can be very dry.
Chris: [Laughter]
Craig: It's just concepts, you know, so one day I kind of bumbled into the GreenSock forum and started reading a little bit in there. You know it has this vibe of being so much friendlier than the rest of the Internet, so I kind of lurked in the shadows for quite some time until I was brave enough to put a question on there. Low and behold, no one called me dumb or anything like that.
Chris: Right.
Craig: So, you go, "Hey, this place is kind of unique." And from there, I started answering some questions on the forum, and you kind of get addicted to it because every time someone asks a question, you end up learning a lot just answering their question, or you see how they do things, which you go, "Hey, that's pretty cool. I didn't know we could do that."
Chris: Right. That's just a great way of putting it is that you're like, you can -- I don't know. At some point in your knowledge journey, you reach this point where you know enough about the technology where it doesn't mean that you know everything. In fact, you've probably learned that you know very little. But you have this base skillset that you could learn anything-ish. You know?
I can imagine somebody leaving a post that's like, "How do I make this eagle fly down around the mountain?" or something. You don't automatically know how the eagle is going to fly around the mountain, but you're like, "But I bet I could figure it out."
Craig: Yeah. The forum questions, you know, sometimes you'll get that kind of question, though, is, you know, "I just saw this website where X, Y, Z happened. How do I do it?" That's where Jack over at the GreenSock forum kind of puts the brakes on things like, "We're happy to answer all your GreenSock questions over here, but to guide you from start to finish how to complete a website or an effect, no, we really can't do that."
Chris: Yeah. Yeah. I suppose. I mean I guess people could help each other do that, but the employed GreenSock people maybe shouldn't be spending their time on that.
Craig: Well, some of those threads can get pretty long over there, but we try to help even if it's not GreenSock related sometimes.
Chris: Mm-hmm.
Craig: But sometimes the threads will just go on for post after post, day after day, and you've just got to kind of cut that off after a while.
Chris: Yeah, I get it. I saw one from you just the other day. You sent me some interesting Pens that we can talk about, but as an example of one that looked like, you know, or I think more explicitly came from a question in the forums. I think I saw a tweet that was like--
So, the Pen itself says MotionTricks.com, your website. Everybody go check it out. It's white on black. But as you scroll down, white wipes across the screen. A classic horizontal wipe. But the text behind it then moves to black on white. It's like, "How the heck would you do that?
I'm sure there are a couple of different ways. I think of blend mode filters and stuff in CSS, but it sounds like started life as something like that, a GreenSock forum thread, and you're like, "I'm going to do it." [Laughter] "I'm going to figure it out."
Craig: You are absolutely right. That's probably half my Pens start that way.
Chris: Yeah.
Craig: Under some kind of question over there, but that one definitely did. The challenge was I want to invert this text on scroll, but I don't want to use a duplicate element. You know using a duplicate element is very--
Chris: Hmm.
Craig: You know you could do that very easily. But with a CSS variable and one tween, it was no problem at all.
Chris: I see. Yeah, I see. It looks like it's not using a blend mode. It's using a gradient behind the text, and it's one of those hard stop in the middle gradients, and then you move the position of that gradient with a custom property that surely comes from JavaScript. Yeah, clever, clever.
Craig: We try.
Chris: [Laughter] Yeah, that's a good one, though. Cool. And no duplicate elements. You really hit everything on there. What else about Motion Tricks, though? What is that website? What does it do for you?
Craig: Motion Tricks is just more of an extension, I think, of my work in the forum. I used to write these really long, detailed posts.
Chris: Mm-hmm.
Craig: Of, hey, you know, "Hey, GreenSockers, here's something really cool you can do," and I'd put a bunch of CodePens in there, of course. But the forum is so busy, those posts would eventually just get lost.
Chris: Mm-hmm.
Craig: You know, after a week, they're 12 pages in. So, I thought, "Well, I probably should move these over to some sort of blog or something," so I took the really big step of registering a domain name, and then I sat on that for another three years before I actually did anything.
Chris: [Laughter] But you got it. I think that's a great reasoning. You want to surface stuff. You already did the work. Theoretically, maybe if the post is good enough that it shows up high in search results, whether on forum or through Google or other search engines or something. But still, that's a big if.
Craig: Right.
Chris: Yeah. I think it's nice that you get more of the benefit out of it. How did you build the site?
Craig: Oh, it's just built on WordPress. I really didn't take a ton of time building it. That's kind of Motion Tricks 1.0, if you will.
Chris: Hmm.
Craig: There is a remodel coming, and it's kind of at the crossroads right now. Do I want to try and monetize this? I've been writing a lot recently, but it's all dedicated to a course I'm building for GreenSock. But it's been a lot of work and a long time coming, so I'm just debating if I want to really keep going with that and monetize this or just put up another, you know, 20 or 30 posts up there and just call it good and call it a hobby.
Chris: Yeah, I see.
Craig: So, we're at a crossroads right now.
Chris: Yep. Yeah, yeah. "Don't think about it too hard," would be my advice.
Craig: Right. [Laughter]
Chris: It's not like you choose to monetize it. It's just that way forever. You know?
Craig: Right. Right.
Chris: But yeah, yeah, I understand. But that is more of a clutch, kind of one-time choice for you is what are you going to paywall and what are you not going to. You know?
Craig: Right.
Chris: If you give it all away, it's a little harder to take it away and be like, "Oops. Sorry. That's paid now."
Craig: Exactly.
[Laughter]
Chris: But sure, yeah. Heck yeah. You've got a bunch of knowledge. Make some money off of it, especially this kind of passive knowledge because it sounds like your -- I think maybe it was before the show started -- but you've been running your own business for 30 years, you said.
Craig: Correct. We had the photo studio for about 15, and now we've had our day jobs -- it's called Sleepy Dog Media -- and I've had that for about 15 years now. Yeah, I've been self-employed for about 30 years.
Chris: A long time! But it sounds like that kind of work is mostly one-off, right? You get a knock on your door, an email, or something, and you do the work. You send the invoice, and you get paid. It's just a different category of business to be selling something that just makes money while you sleep, which is pretty cool.
Craig: Well, you know, it sounds pretty good to me.
Chris: Yeah.
[Laughter]
Chris: Hopefully. Hopefully. The website is a joy to travel around. It says, "This logo does tricks," and you can click on 1, 2, 3, 4, 5, and see the logo go through interesting things. The navigation has interesting things it does. It makes -- it proves the point right in the header, which I think is important, especially if you're going to be selling a course or something through here. You better walk the walk, and you are indeed doing that.
Craig: Well, I appreciate that. Thanks.
Chris: Sure. Let's talk about some of your Pens because you use CodePen as well. Like you said, most of your Pens start as a GreenSock forum answer, it sounds like, but there's lots of creativity on display here and lots of Pens that have gotten pretty darn popular, I'd say. Speaking of really -- maybe all of them are GreenSock. I don't know. I haven't clicked through and investigated every single one of them, but there's one that's pretty simple here of the shape of a fox. It's called "Simple fox morph created with AI puppet warp." Tell me about that.
Craig: That -- yeah, that was another one that started on the forum. Someone was asking about SVG morph, which is one of the plugins over there. And they were trying to morph this shape, and I can't remember if it was a fox or a dog, but anyway, I don't think most people are aware, in AI, you do have the puppet tool. So, for a silhouette like that fox ... AI--
Chris: Does that mean Illustrator?
Craig: Yes, I'm sorry.
Chris: AI.
Craig: Yep, Illustrator.
Chris: Yeah.
Craig: And you can use the puppet warp tool by just popping a few pins into your silhouette like that. Just tilt the head, which is all I did on that fox, ever so slightly, while the pins hold the rest of the body in place. Then re-export a new path, and then just morph between the two paths.
Chris: Wow!
Craig: The beauty is it's got the same number of points, the start path and the end path, so GreenSock's SVG morph just -- you know it's buttery smooth. It's just perfect.
Chris: Right. But the fact that it has the same number of points means that, theoretically, you could do this animation in CSS.
Craig: Absolutely.
Chris: Part of the brilliance of the GSAP plugin is it actually kind of doesn't matter if it has the same number of points, right?
Craig: No, it doesn't. You can definitely use a varying number of points between the two target paths. But if you can make them the same, I will guarantee you'll get a buttery smooth animation every time.
Chris: Right because then GreenSock doesn't have to invent a point, and then it's like, "Where should I invent said point?"
Craig: Exactly.
Chris: Should I do it on its toe or its tail? You probably don't have a lot of control over that, although it does offer you some degree of control. I forget. I'm sure you know intimately how it all works.
I will say this is a little eye-opening in that when the fox dips down to take a bite of another fox -- I don't know what it's doing. [Laughter]
Craig: Right.
Chris: Taking a drink of water, let's say--
Craig: Right.
Chris: --it looks great. You know? It's interesting that this is this morph of two tools, Illustrator's puppet warp tool (which I haven't actually used, but I can imagine what you're saying).
Craig: Mm-hmm.
Chris: Illustrator has pretty advanced vector manipulation tools in it, so you're making a variation of this original fox that bends its head down. You didn't necessarily hand-move every single point. You're using some helper tool in Illustrator.
I know I'm just saying what you already said, but it's so interesting to me.
Then you kind of get infinite keyframes between them, essentially, which I think is interesting. I think of if some old-timer Disney animator working with pen and ink - or something - was to draw this fox, they'd maybe put two keyframes, maybe, hand-drawn between this. But there is no keyframes necessarily here, like the morph is just going to kind of infinitely morph.
Craig: It just does its GreenSock magic, you know.
Chris: I also often think of when I've played with morphing in the past. I'm like, "I'm going to morph this star into a pushpin shape," and it's still satisfying. In fact, extra amazing because I'm like, "How the heck does that work?" [Barf sounds] It changes into it.
Craig: [Laughter]
Chris: So, to see this fox make a morph that isn't a fox into an elephant or something, it's just a fox into a slightly different fox shape, and it's somehow extra amazing to me, like, "Oh, my gosh. I could make a little scene or something." You know? I don't know. It evokes kind of like cartoonish animation, not these drastic changes.
Craig: Right. It's got you thinking now, right?
Chris: It does!
Craig: All right.
Chris: It makes me want to crack open Illustrator and play with that puppet warp tool or something.
Craig: Right.
Chris: This episode of CodePen Radio is brought to you in part by Notion. Learn more and get started for free at notion.com/codepen. That's notion.com/codepen to help you take the first step toward an organized, happier team today.
Have you not heard of Notion? Have you not used it? It's one of my favorite. Absolutely the last decade, it's got to be.
It's kind of an all-in-one collaboration tool. You can use it alone, so it could be just collaborating with yourself. But I feel like Notion really shines in a collaborative way because it's kind of like you invite somebody to a team or a workspace on Notion, and then things are shared. People can have their private stuff, but the value of it, to me, is how shared things can be.
I say all in one tool. It doesn't really feel like that, but it ends up being that. You can do a lot of workplace organization that, like, what are we talking about? What are we working on? What's up next? How do we stay organized and keep kind of ourselves and share the same brain a little bit? Notion is a little bit like a shared brain for your workspace, and I love that about it.
At its root, it's just custom documents, but it's really so much more than that. It's worth checking out, notion.com/codepen. Thanks so much for the support.
Chris: Yeah, sorry. I didn't know if you felt like spending so much time on a fox. There are Pens here that are a little more robust in what they do, perhaps. The very first one in this collection, in fact, Craig, you made this collection, so I'll put the link to the collection itself in the show notes, assuming that's okay with you.
Craig: Oh, absolutely.
Chris: Yeah, so the very first one in there, as I speak -- collections can be added to and reordered at any time -- is one called the "Wavy Numbers Gauge." That's one that you've also wrote about on MotionTricks.com, so not only can you see the demo, see the code, but you can read Craig explain the thing.
It's like an input type range, right? I'm dragging this slider between zero and 20, so fair enough. But it's more fun than that, right? [Laughter]
Craig: Absolutely.
Chris: The numbers kind of bulge away from it - or whatever. What's the story behind this one?
Craig: That one actually did not start on the GreenSock forum. That came, [laughter] oddly enough, from -- it's an After Effects plugin called easyRulers.
Chris: Mm-hmm.
Craig: They have some things like that, so I was working with that on an explainer video one day, and I wondered how I would do that with some SVGs and a little GreenSock magic behind the scenes. That's how that one came about. It's just, you know, why have this ordinary little slider? We can have a slider with the numbers doing this big sign wave as you pull the indicator underneath it.
Chris: Mm-hmm.
Craig: So, I think it looks pretty cool.
Chris: It does. It does look cool. It's one of those -- it's like the definition of kind of like side effects with interaction. Right? It's not just -- you know. You're getting animation on the thing that you're interacting with, and then other things are reacting to what you're animating. In this case, very directly, like the number right across, like if I slide it to number 10, number 10 is the highest thing in the wave. But all the way down to 4 on the left and 16 on the right, the numbers are also being affected, just to a lesser degree. It's just very satisfying to use.
You know I'm curious. Will all the video production stuff you do, certainly you use stuff. I mean, yeah, you quite literally said it. You use After Effects too, right?
Craig: Correct.
Chris: Right, so you have all this After Effects skill that Web people don't necessarily have. Did you go through a period of being excited about Lottie, or whatever they call it, which is like, "Ooh, I can use my After Effects skills and just plunk it over to the Web"?
Craig: Yeah, Lottie is pretty cool. I actually haven't gotten too far into it. I don't know. I just spend so much time on GreenSock and the forum and using that.
Chris: Right.
Craig: With the day job, with After Effects, I don't know. I haven't had time to dive too far into Lottie. But that's always the way, right? There are just not enough hours in the day to get it all done.
Chris: Yeah. For sure.
Craig: But yeah. Lottie is cool.
Chris: Yeah. Interesting to hear you say that because there's always more of a reason. You know? Not that--
I totally agree. There are not enough hours in the day. But I feel like if you -- you've seen it, right? If you liked what you saw more than you did, you probably would have spent more time with it. You know?
Craig: That's fair.
Chris: Not anything against Lottie. Yeah.
Craig: Right. Right.
Chris: I just got this feeling that people do After Effects work, and then you export it, and then it's like, "Oh, cool. It's on the Web," but that's it then. You know? It's not maybe as fun or dynamic or interesting as working with animation in GreenSock in a Pen itself because by the time Lottie is over there, you can't touch it (as far as I know).
Craig: Right. That's the only difference there with After Effects and making a video like that. It's a very linear experience. The user really can't interact with it a whole lot.
Chris: Mm-hmm.
Craig: But yeah, with Pens and GreenSock and that, of course, we can make it completely dynamic and interactive. They can mess with it all day long.
Chris: Yeah. Yeah. Like everything. Like the timeline itself, like the literal code. You know? You can change that, and then you could -- if you wanted to, and I'm sure you've done and seen other people do, you can say, "Ah, you could change the code, but I'm actually going to make it easier for you to change the code." Like, here are bunch of variables at the top of the JavaScript, for example, or a slider right on the Pen itself to change those values. These days, you can even start offering that stuff through CSS in custom properties.
Craig: Absolutely.
Chris: So cool!
[Laughter]
Chris: All right. You pick one now. What's one that you want to talk about (from your collection)?
Craig: I don't know. I've always kind of been partial to the cursive handwriting burger animation button or burger button.
Chris: Mm-hmm. The one that says menu underneath that in cursive?
Craig: Yeah.
Chris: Yeah.
Craig: You know just because we've got the animation of a burger button, which of course ubiquitous all over the Web, but I just thought a little handwriting underneath it, so you have that text indicator, too, of what is this. It's open. It's closed. I don't know. It just uses one of my favorite GreenSock plugins, Draw SVG, which is always a joy to use.
Chris: Mm-hmm.
Craig: So, yeah, that's one of my all-time favorites.
Chris: Yeah. Really clever. I don't even remember seeing this right when it came out, so I'm glad you brought it up here. I can attempt to do it for the audio people out there.
Like Craig said, an animated burger. You've seen it a million times, but this one is really classy. You know the X itself kind of goes on a little journey out and around and back again to kind of make the burger. There's always that thing that you've got to deal with that's like, "Well, an X only has two lines, but a burger has got three, so what are we going to do here?
Craig: [Laughter]
Chris: It's elegantly handled here. Kind of disappears and comes back. But that's not the beautiful thing about this Pen. The beautiful thing is the cursive, like Craig said. It says menu in lower case cursive, and then, as you click it, it doesn't morph. It draws, like Craig pointed out. It's a different plugin at use here. So, I'm imagining what you did, and let me see how close I get. My guess is that you made a vector path (probably in Illustrator because clearly you have and use Illustrator) that was both the word close and menu in one big, long vector art, and then you draw some portion of that path. Yeah?
Craig: Look at you. You got the long points right there. Good job.
Chris: [Laughter] I wouldn't even have thought of that. It's so great. You take close menu, one big, long vector string, and then you say, "Okay. Please colorize a portion of that string."
The reason that's possible, isn't it--? I'm tempted to call it a CSS property, but I guess maybe it even manifests, and SVG attributes is probably the more correct way to refer to it as is that you can dash a line in SVG.
Probably when it was invented, people were like, "Ah, yeah. It's a vector line. People will probably want to dash it." Then as soon as they deliver that, which I'm sure was like 1994 - or whatever - (SVG is very old) that people used it not to necessarily make dashes but to make really super long dashes that essentially draw portions of an element instead of the whole thing.
Craig: Exactly.
Chris: I wonder if they foresaw that. You know? I don't know. A beautiful Pen, though. That's mandatory. Everybody, check that out. It is very, very cool how that works.
Craig: Well, thank you.
Chris: Begging for a tutorial. It probably already exists on page 397 of--
Craig: [Laughter] Right.
Craig: --GreenSock forums.
Craig: Right.
Chris: Probably 3,097. Uh, okay. Let's do another one: Parallax SVG viewBoxes. Those are three of my favorite words on the Web. [Laughter]
Craig: Right. Right.
Chris: Some people react a little negatively to Parallax because it sometimes is attached to the concept of scroll jacking where things don't scroll in a way that you kind of expect them to on the Web.
Craig: True.
Chris: But usually, it's not the biggest offender. You know? It usually just means - I don't know - slow down this background image as I scroll away. You know it's not inherently scroll jacking, and it's usually a pretty beautiful effect. I often think of webpages that have multiple layers and, as you scroll down, the layers move at a different speed. Isn't that the definition of Parallax, that Sonic the Hedgehog, whatever?
Craig: That sounds right on the money to me. I don't know.
Chris: Okay. What's happening here, instead of up and down, it's left and right, which is probably, if we're talking Parallax origins, was probably more common because it probably had roots in that kind of side-scrolling video game thing. Then how does it affect--? How does SVG and viewBox play into it?
Craig: Well, it's actually three SVGs stacked on top of each other, and we're animating the viewBox of each one just a little bit differently; one just a little further than the next and so on. So, you get that cool back-and-forth Parallax by using the dragger there.
Chris: Yeah.
Craig: You can see the little aliens doing their things.
Chris: [Laughter]
Craig: I'm not really sure why I made that one. It was a few years back.
Chris: Yeah.
Craig: But I can't remember if it was something on the forum or just something. I'm just kind of a sci-fi geek, so I said, "Well, we can put some aliens here. Let's see what happens."
Chris: I just seem to remember a couple of years ago, animating the viewBox has a little heyday in popularity.
Craig: Right.
Chris: I can't remember why exactly. I remember -- I think it was maybe Bustle.com or something made these quizzes, and they were really unique in that they made one huge, just absolutely massive SVG, and there'd be a question in one tiny little spot of that SVG. As you answer the question, it might take you to position X or position Y, somewhere different on the thing. The "camera" would kind of zoom out and then zoom back down into the next question. It did so by animating the viewBox, which is actually kind of easy.
Craig: Oh, yeah.
Chris: Yeah. I think it was kind of a clever thing. I think you look at that and you're like, "Oh, my God. Whatever technology powers this is insane," but it's actually not. It's just animating a couple of numbers.
Craig: Oh, yeah. The viewBox animation is quite easy, and it looks like we're pretty much getting that in CSS now, right, with the -- what's it called?
Chris: Oh, yeah, object view box.
Craig: Object view. Yeah. Yeah, so that's going to be pretty cool.
Chris: Object-view-box, I think. Yeah, certainly. Certainly, and animatable. Hopefully, they'll make it one of those animatable properties that's inherently performant. You know?
Craig: That would be good. [Laughter]
Chris: I sort of doubt it will be, but maybe. All right, so -- but you had multiple ways of doing this. You could have taken those layers and animated them with CSS and just moved their translate X property or something too, right?
Craig: I absolutely could have.
Chris: Mm-hmm.
Craig: You know. I'm kind of a GreenSock addict. I'm a little biased.
[Laughter]
Craig: That's what I reach for first.
Chris: Well, once you're in SVG, maybe just stay in SVG, you know?
Craig: Right.
Chris: I don't know. There's something about keeping the technology together that's--
Craig: True.
Chris: --that's kind of cool. All right, so what's motivating you these days? It sounds like you've kind of got a good thing going, right? You're doing work, doing creative things, sticking around some forums with positive people that you like.
Craig: Oh, absolutely. The GreenSock forum, if you've never been there and posted a question, I say go for it. I will guarantee you you're not going to be made to feel bad. I mean we all know there are places on the interwebs where you can post a question and people won't be kind (shall we say) sometimes. But over there, you're just going to get this positive experience, and it doesn't matter whether this is your first day of using GSAP or you have something super complex. You're going to get an answer, and it's just a warm, welcoming community, so I love hanging out over there.
I've been a moderator for about six years now, I think.
Chris: Mm-hmm.
Craig: And I'm not quitting any time soon.
Chris: [Laughter] Fantastic. Yeah. Really, it's just eye-opening. What you tend to see in your work -- but a lot of that is informed by these forums and just GreenSock people, in general -- is Web experiences that are, for lack of a better word, atypical. You're like, "Holy cow. You can do that on the Web?" I imagine that's the real benefit I see is that opening your brain to possibilities on the Web beyond the basic kind of stuff I tend to see and do. Put some text on a page or something.
Then you browse Craig's profile and you're like, "What?!" There's a black and white sketch image of a room, and I can move my cursor over it, and it transforms into a colorized photograph of the room," or whatever.
Craig: Right. Right. Right.
Chris: You're like, "What is that?!" Pretty, pretty, pretty cool, and then basking in the kind of intersection of SVG and the rest of Web content, too. I know that -- I've tried to make that point on this show because we do end up talking about GreenSock a lot. There are just a lot of GreenSock beautiful work on CodePen.
How do I say this? SVG comes up a lot, too, and I almost worry that it feels like GreenSock is an SVG animation library, and it's not. Right? They have cool plugins for some SVG stuff, but GreenSock, in a way, just kind of doesn't care what it's animating.
Craig: No, GreenSock, at the heart of it, is just a property manipulator, which is just a fancy way of saying it's a counter but it just does it perfectly. Of course, we have all the plugins. You've got Draw SVG, Morph SVG, and all that.
Chris: Mm-hmm.
Craig: But no, you can animate SVG, DOM elements, canvas. It really doesn't matter. If JavaScript can touch it in any way, shape, or form, GreenSock can animate it.
Chris: Yeah.
Craig: GSAP is like this super fancy sportscar that'll drive 300 miles an hour, but the barrier to learning to drive it is very low. If you just want to hop in the sportscar and drive it to the grocery store and back, that's fine.
If you just want to sequence a bunch of divs moving around the screen, it can do that. If you want to get super fancy effects and morphing and draw SVG and use the flip plugin and scroll trigger, it'll do that. But you can jump in and be animating something within just an hour of learning how to use the basics.
Chris: Right. Well, that's a heck of a sales pitch. We'll leave it at that.
Craig: [Laughter]
Chris: Thanks so much, Craig, for coming on the show. Check out, you know, follow Craig @PointC on CodePen or Craig_PointC on Twitter, and check out the website at MotionTricks.com with or without the dash. [Laughter] Anything else you want to leave as advice or final words for everybody, Craig?
Craig: No. Just wanted to thank you for making CodePen because, honestly, I couldn't do my work without it. It's all over Motion Tricks with my tutorials and, of course, everything we answer over in GreenSock always requires a CodePen demo, so great job on that, sir.
Chris: Fantastic. I really appreciate you coming on, and I hope to talk to you again soon. Take care.
Craig: Thanks for having me.
[Radio channel adjustment]