This week I get to talk to Ryan Mulligan! Ryan put together a Collection of some of his personal picks for favorite Pens and we get a chance to talk through a lot of them. There are some classic moments here I really feel, like when something you consider pretty basic gets way more popular than you ever thought it would. Ryan has a knack for feeling out really cool new technologies and then quickly using them to build great demos that play up what those technologies were born to do.
Time Jumps
- 00:28 Guest introduction
- 01:20 The story behind the username
- 01:58 NFTs and CodePen
- 03:46 Card Hover Interactions
- 07:05 Working at Netlify
- 12:27 Sponsor: Automattic
- 13:34 Heart Pen
- 16:47 Flip animation
- 18:39 Cart animation Pen
- 23:56 Animated Verbs Pen
- 26:33 Burger Boxer Pen
- 28:40 Using React
- 31:44 Password input Pen
Sponsor: Automattic
Automattic are the makers of WordPress.com, the fastest and easiest place to spin up a WordPress site, without sacrificing the power of self-hosted options. If you sell stuff on WordPress.com, the built-in help to do that is powered by WooCommerce, the premier eCommerce solution for WordPress. It’s the same WooCommerce whether you are on WordPress.com or not. If you are self-hosted, you can almost certainly take advantage of Jetpack, Automattic’s WordPress plugin that adds enormous functionality to WordPress, like a vastly improved site search, real-time backups, security features, and tons more.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. Time for CodePen Radio 357. I have another outstanding CodePen member and guest of the show, Ryan Mulligan. How ya doin', Ryan?
Ryan Mulligan: Good. Good. Thanks for having me on.
Chris: Yeah. My pleasure. My wife's last name is Mulligan. No relation, I assume.
Ryan: I don't think so.
Chris: A lot of Mulligans out there, I think.
Ryan: I don't know her.
Chris: [Laughter]
Ryan: There are quite a few. I don't know if you've ever been to ryanmulligan.com, but I've been waiting for that to be given up for a long, long time.
Chris: Yeah?
Ryan: It's been the same for like--
Chris: What is it, like a senator in Texas or something?
Ryan: No.
Chris: Oh, my gosh.
Ryan: It's three random pictures of little kids that I assume are very grown up at this point because it's been up there--
Chris: It says at the bottom "Coolest kid in NH," meaning probably New Hampshire, huh?
Ryan: Yeah. It's a whole separate site.
Chris: Wow! Dang. Yeah, keep your eye on that.
Ryan: Every year, I look back and it's still renewed.
Chris: Renewed!
Ryan: [Laughter]
Chris: Somebody is coughing up the bucks.
Ryan: Yeah.
Chris: Ah, you'll get it. You'll get it. You'll never get mulligan.com, though.
Ryan: Never. No. No.
Chris: I don't know whose got that, but that'd be a pricy one. Yeah. Yeah. It's crazy these days.
Otherwise known as hexagon circle online, yeah? Makes perfect sense, of course, I'm sure. Is there a story behind that one?
Ryan: There is not. I've been asked that so many times, and I just like shapes. [Laughter]
Chris: Uh-huh.
Ryan: So, I combined those shapes together and said, "Hey, that's--" you know, now with the hexagon NFT stuff, I'm not as keen on it, but-- [Laughter]
Chris: I know. You got really screwed there. Twitter now famously having kind of rounded -- you could call them a hexagon circle if you set an NFT as your profile picture.
Ryan: That's right.
Chris: Oh, ouch. Sorry. I didn't even think of that.
Ryan: [Laughter]
Chris: You have not chosen to do that, I see.
Ryan: I have not.
Chris: Although, it does come up on this show a little bit because there's some crossover between CodePen and the NFT world a little bit, especially with, you know, there's even NFTs that I don't think you can quite NFT the DOM, but you kind of can. I don't know. I don't know all the details of it, but I have seen essentially HTML, CSS, and JavaScript generative NFTs. Some of them are kind of cool, and some of them come from the CodePen community itself. So, for me to totally be ignorant on it isn't a good move. But you haven't taken that leap yet, I take it.
Ryan: My understanding is so high level.
Chris: Yeah.
Ryan: I guess when it comes to the CodePens, is it a snapshot or is it the code itself? Is it a combination? I don't really understand it.
Chris: Yeah. Right. I think it could probably be whatever it wants to be, in a way.
Ryan: Sure.
Chris: But the way I've seen it on one particular marketplace was that they give you a replacement for math.random. The point of it is that it's deterministic.
Ryan: Yeah.
Chris: If you pass in a special URL parameter that the values that math.random returns are then based on that URL parameter. Meaning that you could mint 100 of them, but the point is that they'll always be the same because it's based on a URL hash. It'd be too weird to own an NFT that was different every time you looked at it. I think that's kind of like not the point. [Laughter]
Ryan: For sure. Yeah. Yeah.
Chris: Yeah, so anyway, it allows you to mint 100 of them and have them be somewhat random in a way. My understanding is very high level, too, and I didn't mean to drag you down this conversation.
What would be more interesting to talk about is some of your Pens. You have some really super famous ones. In 2020, you made a card hover interaction that entered kind of infamy in CodePen land.
Ryan: That one is so bizarre. That was actually at my previous job. I was working on a project, and as I often do, I used CodePen just to spin something up really quickly. That's what this was. It was just to spin up this idea that the design team had.
The next thing I know, it's number one in 2020. [Laughter] I started cracking up. I'm like, "This one? Really?" There are so many just really wonderful CodePens out there, especially in 2020. We're all trying to as creative as possible when we can't go anywhere, and that one happened to be number one, so it's really interesting.
I don't even think it's really a perfect thing either. I think it just kind of worked for what it was for that scenario. But it could be improved.
Chris: No. I think you downplay it a little bit. I get what you mean. It's like this blog post you spent 15 minutes on takes off because it happens to tap into this thought everyone is having - or whatever.
Ryan: Yeah.
Chris: But the one you spend a month on, nobody cares because it just has past the zeitgeist - or whatever.
Ryan: Right.
Chris: But there's some stuff going on here that's worth noting. The photographs you chose are different enough and beautiful enough. Yet, they all work together pretty well. The idea of hovering over a card and having things happen to it is pretty - I don't know - common and cool these days. And the fonts you chose are really beautiful. That italic is, like, "Wow! What even is that?" The way that the photos kind of darken to make the text reveal more gives people that feeling like, "If I'm going to do this, I should do it like this." You know?
Ryan: For sure. Yeah. One of my favorite things to do is just tweak a Cubic Bezier, right? Really trying to get that easing as nice as possible, as seamless as possible.
Chris: Yeah. It is amazing how far that goes, isn't it?
Ryan: Yeah.
Chris: Easing out is great, or whatever the default one is, which is just ease, I think. I don't know. What is the default?
Ryan: I think the default is ease. Yeah, that sounds about right, which is interesting in that it's not linear. But I guess that makes sense if you're just trying to translate.
Chris: I wonder. Do you think that was a success of CSS was to not make--? You know, famously, nobody changed the defaults. We know that from working on CodePen is that "Yeah, sure, it's great to offer options and stuff, but 99% of people never change the defaults," meaning that all websites in the world would have linear transitions on them, which are, for the most part, kind of not great. Right?
Ryan: They're not. Right. That's a good point. Might as well go with something that's a little snazzier.
Chris: It gives the Web a little elegance. Yeah. They are useful sometimes, though, right? I'm trying to think of the perfect use case for a linear transition, but sometimes you've got to ask for linear.
Chris: Well, it's good for an infinite rotation, right?
Chris: Oh, sure.
Ryan: That's a common way that I use it. If I just want something to spin 360 or turn once.
Chris: Because you want the speed at the end to be the same as the speed at the beginning of the next.
Ryan: Yes. Exactly. Yeah, so just a constant motion.
Chris: Yeah. That's cool. Okay, so that's your most famous Pen, although I can see that being just like, "Uh... I just did this for work." You're not there anymore. You're at Netlify now, though, right?
Ryan: That's right. Yeah. I just joined Netlify. Gosh, what is it, week three?
Chris: Ooh, brand new. I was going to say I didn't know Ryan worked there. That's cool, though. Your title is Marketing Engineering Lead, so working on some of their marketing pages.
Ryan: Yeah. My first PR -- [Laughter] My first PR was actually on the homepage itself, like in the header, so that was pretty wild. Really, for me, it's pretty common. It's just adjusting layouts, some content, getting that image in there.
Chris: Yeah.
Ryan: Just trying to update stuff pretty quickly. But I don't think I've ever joined a company that's pushing up a PR week one, and it's on the homepage, so that was pretty wild.
Chris: Yeah, that's big because Netlify is getting big. Even the homepage, just because everybody kind of keeps a little bit of an eye on Netlify, plus they're a sponsor of the show and all that--
Ryan: Mm-hmm.
Chris: It wasn't that long ago where I remember they launched this new homepage and it used [laughter] -- I don't know. I think it was the Garfield font. It had kind of a more wispy quality to it than what's there now.
Ryan: I can't remember it.
Chris: All of a sudden -- but it leaned into that kind of teal or muddy blue kind of thing. But the new homepage is power blue. A little change over there.
Ryan: Yeah. Yeah. A lot of good changes coming. Netlify is always doing a lot of great stuff. I think one of the coolest things is being able to see some of these beta features coming out.
Chris: Uh-huh.
Ryan: Being able to see that internally now as, before, where it's like they're kind of waiting to see what they're rolling out with, so that's a lot of fun.
Chris: Yeah. You got the inside track.
Ryan: That's right.
Chris: Yeah. It's been a good couple of weeks for you all. There's that Netlify Graph stuff, helping out API usage. Certainly, I saw people sharing that around quite a bit.
Ryan: Yeah. I don't know if you've played with that yet, but it's so simple to use. It's really awesome.
Chris: I need to, but I do like the idea of -- well, I like the idea that the word Jamstack has turned into -- that it's almost just a static site, almost doesn't qualify as Jamstack, even though it does. Let's just say that that would be the case. In order to earn the Jamstack title that you have to do something dynamic, a bit, like use the A in Jamstack, even though it's not an acronym anymore, but use some kind of API or something. Do something dynamic.
Ryan: Mm-hmm.
Chris: Especially now that there are so many different things you could be doing that, okay, well, if that's what you want me to do be doing, what APIs? Then, like, "Oh, but really?" It's just the usage of an API at all means probably some auth. You know?
To say, "Oh, we're rolling out a feature to make that twice as easy as it was before," seems pretty smart.
Ryan: Yeah, it's nuts. I'm not going to gush on Netlify too much, but my personal site, I moved that to Netlify and it's amazing how easy that was to do.
Chris: Mm-hmm.
Ryan: Now it's built on 11ty. Just how awesome it is just to push up changes to my repo, and then those changes are just reflected on the site. You have full control over how that works, too, right? You can obviously have feature branches and test those out first and migrate this back in.
Chris: Right. Right.
Ryan: I think it's been such a great experience moving over to that.
Chris: I was just thinking of how transformative that has been. Netlify was a big part of, I think, that push. But probably slightly before Netlify, I almost liked to high-five Heroku--
Ryan: Oh, yeah.
Chris: --because I feel like they were a little OG in, like, "You know where you should be able to deploy from? The CLI."
Ryan: Yep.
Chris: You know? Which Netlify of course, now does too, but also Git. Like a commit should and could be a push if you want it to be. Netlify comes in and just kind of blows up that world a little bit and really solidifies that, like, "This is how you can and should push code. And, as you do it, we're going to give you these immutable URLs." That's kind of a big deal because you think of them as this deploy preview, which it is, but you can run tests against it and run linting and all that stuff. I think that's a big deal.
It's funny to see how almost that alone encouraged the use of this Jamstack architecture because it's so obviously useful. Then where are all the other stacks and the other hosting companies that are trying to encourage architectures of other types? Why aren't they super fighting back? Why can't I?
Why isn't there a WordPress host that says, "We'll spin up a staging copy of your WordPress for every push so that you can see what you're about to change"? Developers around the world are saying, "We want this. It's amazing. It works for every workflow."
I understand it might be harder on different architectures, but still, it's like, "Gees. We need it. We want it."
Ryan: Maybe possibly they're making those changes. We just don't hear about it. It's flying under the radar.
Chris: Yeah. Yeah. Possibly. I feel like I keep an eye things well enough to know--
Ryan: Sure. [Laughter]
Chris: --if it'd be happening a little bit. Staging is staging. That's fine, but it's a little different than an immutable preview. You know?
Ryan: Right.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Automattic. Automattic is the maker of WordPress.com, of course. Probably the quickest and easiest way to spin up a WordPress site. As you grow and perhaps have more in-depth or developer needs, you can always upgrade to a plan (that's business or higher) that allows you to have FTP access into it, install any plugin you want, have direct database access. Really powerful stuff.
If you want to sell something on WordPress.com, it's ultimately WooCommerce that does that. WooCommerce is on WordPress.com. But if you self-host your WordPress site as well, WooCommerce is the plugin for you for selling stuff. It does a tremendous job of that. I've used it on many, many sites to sell things over the years.
Then while we're talking about plugins, Automattic is the maker of Jetpack as well, and Jetpack is statistics for your site, but that's a tiny baby feature. It's real-time backups. It's all kinds of performance-focused features like hosting your images and things like that. It's site search. It's just amazing. It does all kinds of stuff for your WordPress site.
Really a trifecta of WordPress power. So glad to have them as a sponsor for so long. Thank you so much, Automattic, for making good software that powers many websites that I personally work on and am proud of.
[Guitar music ends]
Chris: Let's do some more Pens. You sent me this collection; we'll put in the show notes. It was just some Ryan pics. Beautiful stuff. One of them you have in here is a heart with some blasting rays from behind it that looks like it was from a brand new project. A little Valentine's Day thing you shot out just this year, right? MeSend.Love?
Ryan: Yeah. Yeah. I was looking for a domain, which as you know is very hard to find. [Laughter]
Chris: [Laughter]
Ryan: But I just kind of wrote that randomly, and it sort of made me laugh, so I just kind of rolled with it and said, "Why not?"
Chris: Nice.
Ryan: I'll just do that and get it for a little bit. But I think what's really interesting about that one is that, in CodePen, a user can come in and click that customize button. Then change that intro and outro text. So, they can have it say whatever they want, and it's kind of fun because when I have friends use it, they send the CodePen back with their customized text.
Then you see they wrote something in the beginning, and then the heart animates and goes through the whole thing using GreenSock to create some really cool animations with it.
Chris: Yep.
Ryan: I need to call out. My partner did the heart faces, and I love them. She gave me two options, and I said I need them both, so that's why there's two of them in there.
Chris: [Laughter] Nice. I of, like, watery eyed hearts.
Ryan: Yeah. It's so great.
Chris: They're very endearing.
Ryan: Then you get to the outro and it's like, "Oh..." You know? You have this anticipation building up to see what that is going to be, so I think it's kind of fun. I was really excited about it.
Chris: Yeah, truly. Yeah, it's cool. Maybe started life as a CodePen. Then you've got to export it. Then you've got to put it somewhere else so Netlify can host it, right?
Ryan: Yeah. That's what's kind of great about having the pro account is I can export it and make some tweaks locally and then push that to a repo.
Chris: Yeah. Right on. It's a thing that I almost want to write down to make sure that we have some unit tests or integration tests in place for because it counts on this ability that we probably put in many years ago, but I just am kind of randomly glad we just haven't broken in all those years, which is the idea that query parameters from the parent get passed down into the preview, which is true in the Pen editor and in full page view. Your little preview link there shoots out to full page view on CodePen.
Ryan: Right.
Chris: That query parameter is present. It gets passed down into the iFrame, which does not automatically happen on the old Web platform. You know? We have to reach up to the parent and grab those and make sure that they're available inside. It was just for use cases like this.
Ryan: Yep.
Chris: You know? Yeah.
Ryan: That's pretty awesome.
Chris: We'll try not to break that on you, Ryan.
Ryan: Yeah. [Laughter]
Chris: [Laughter] It's just the kind of thing that sneaks by.
Ryan: Keep it alive.
Chris: Yeah. We won't. We won't. I'm just saying it's a funky one.
You wrote a blog post recently, too, that I linked up on CSS-Tricks, about Flip.
Ryan: Yeah.
Chris: You mentioned GreenSock for this, the MeSend.Love. A lot of the animations on that are powered by GreenSock. Certainly, the most famous animation library on CodePen. They've done some cool stuff recently. It was a release of theirs that made the Flip plugin free.
Ryan: Yeah.
Chris: Some of their plugins, they say, "In order to get access to that, you sign up for our--" I forget what they call it exactly, but the GreenSock membership thing unlocks some plugins. This one used to be behind that little paywall kind of thing, and they have freed it from that. Very generously of them. I wouldn't have done it. Y'all can pay for my sweet code.
Ryan: [Laughter] Yeah.
Chris: [Laughter] But they did in Flip, meaning this famous Paul Lewis thing, meaning first, last, and input.
Ryan: Invert.
Chris: Play? Invert, play?
Ryan: Yeah.
Chris: Which was this kind of clever idea that you should move things to where they're going to be. [Laughter] And then use CSS transforms to put them back at their starting location. That way when you play the animation, it's just transforms being used to move. It's kind of a way to force you into using transforms rather than using something like left, right, top. You know?
Ryan: Yeah. Yeah, for sure. It's really clever. But to write all that stuff by yourself, I don't know if you've ever tried, but it's not easy. There's a lot to it that you have to be thinking about.
Chris: Yeah.
Ryan: It's nice that the Flip plugin (especially now, being a free plugin) makes it so easy just to do that. And there are so many little parts. I'm a big fan of the API of GreenSock, so it just makes it so easy for me to just kind of set this stuff up. I know you're referring to the cart animation thing that I put together.
Chris: Yeah. It's kind of the perfect case for Flip, right? All these cart items are laid out in a grid, and it looks like they're just sitting there in a grid. Then you animate them to their final position. I guess that is what's happening, but a library is what helps do it. Then make sure that it's super performant.
Ryan: Right.
Chris: Also, it's not hard to write. You just say, "Change class, Flip." [Laughter]
Ryan: Yeah. Right.
Chris: Yeah. It's just tremendously easy to get done.
Ryan: And the fact that you can use -- there's an on complete method, so when that first transition completes, you can run another one and do all this stuff.
Chris: Yeah. There you go. You get the power of GSAP along for the ride.
Ryan: Yeah. Yeah, so if you click on one. It's kind of a crude idea, but you wouldn't really have maybe a shopping cart experience animate this way. There's a little more thought that needs to go into it. But what's nice is that when it does animate, it hits that button, that cart, and then it can say at this point, "I want to flip the count." Right?
Chris: Yeah.
Ryan: That little bubble, that number flips up.
Chris: From one two or two to three, or whatever.
Ryan: Yeah. Yeah.
Chris: Right. You want that to happen at the end of that animation. So, if you were doing this purely in CSS, not only would it be more difficult, but you'd have some magic numbers.
Ryan: Exactly.
Ryan: It'd be like, "Oh, there's 1,000 milliseconds to run the animation, so that means the next animation needs to start at 1,000 milliseconds."
Ryan: Yeah.
Chris: You'd have some technical debt there, wouldn't you?
Ryan: For sure. You can get clever. Put things into CSS custom properties and do it that way.
Chris: Custom properties, yeah.
Ryan: Still, it's easier to manage, obviously, this way with the Flip plugin.
Chris: Yeah. Pretty neat. It's still a great technique. It's not even a new technique.
Ryan: No.
Chris: But it's kind of coming back en vogue a little bit because of the plugin's freeness. Surely, it wasn't even the only library that did it. I have some memory of David Khourshid probably having a flip specific plugin that he made at one time. I'm not sure if he maintained it, still recommends it, or whatever.
Ryan: Right.
Chris: I think other, and probably Paul Lewis himself probably put something out when he talked about the technique, in general. But then it always changes the game a little bit when GSAP does it. I think of their scroll timeline, too. There are all kinds of plugins to do scroll animations. But when they do it, then everybody just uses that. [Laughter]
Ryan: I was doing a project. A friend wanted to create this virtual card game. I was doing a quick prototype, and I built it in Vue.
Chris: Mm-hmm.
Ryan: Just to have a little store and everything. I had it where you have your cards, and you would click on it. It would put the cards up on the screen. You can scroll back and forth to see all the cards that you have.
But when it did that in Vue, it automatically transitioned these things perfectly the way I wanted it to. I think Vue might have that built in. Certainly, correct me if I'm wrong, but I couldn't believe it just did that.
Chris: Oh! That's right! Flip is in Vue.
Ryan: It's in Vue.
Chris: It is.
Ryan: Yeah.
Chris: It is. It is. Yep. You wouldn't need it necessarily in Vue. I think Svelte might, too.
Ryan: Right.
Chris: Not everything in the world is in Vue or Svelte.
Ryan: For sure. Yeah.
Chris: [Laughter]
Ryan: Well, it's just funny. I was trying to recreate it with just JavaScript and CSS. I’m like, "Why can't I get this to work?!" I realized that's why. It's because it's a built-in feature with the Vue transition.
Chris: Yeah. A little freebie in Vue land.
Ryan: Yeah.
Chris: Interesting. It'd be cool to have whoever wrote that in Vue talk to whoever landed the commits. Probably Jack in GreenSock.
Ryan: Mm-hmm.
Chris: And be like, "How did you approach it? What edge cases did you find?" You know?
Ryan: Yeah. Yeah.
Chris: I love it. I just used it just to do kind of a rotation thing. But the idea being you have a bunch of cards, like you had. But instead of them moving down to a cart, they shifted position on the grid. Flip was great for that, too, because it means that I don't have to configure Flip to say, "This goes here. This goes here." I do all that in CSS.
Ryan: Mm-hmm.
Chris: I just say, "Uh, change a class. Move crap wherever."
Ryan: Mm-hmm.
Chris: There could be ten items. There could be three items. They could move to totally different places on the grid. I don't have to touch my JavaScript to deal with that. I do all that where it's more comfortable for me in CSS and then just say, "and flip." [Laughter] Yeah, that's kind of the beauty of the Flip API is just do what you're going to do.
Ryan: Yeah. It's so much fun, though. I love messing around with that, experimenting with that. There are a lot of things to consider, obviously. You might not do this in production or you have to consider motion and all that kind of stuff. I think I did that in this Pen, too, where if you have reduced motion on, it won't animate this thing flying across the screen. It'll just kind of like put it inside the cart.
Chris: Absolutely. Yeah.
Ryan: Obviously, there are things to--
Chris: Thankfully, JavaScript has a nice API for that, too. You do that. What is it, window.match--?
Ryan: Match.... Yeah.
Chris: Yeah.
Ryan: It's super easy.
Chris: What always gets me is that I remember that part, and I write it, but then I forget that you set that to a variable. Then to actually test it, you have to test that variable.matches.
Ryan: Yeah. Yep.
Ryan: Oh, it kills me.
Ryan: Every time.
Chris: [Laughter] Some other interesting Pens here. There's a little words jumping up and down. Oh, interesting. You used that splitting library. Is that Shaw's thing?
Ryan: Yeah. Gosh. When was that? 2019? It was a while ago.
Chris: Yeah. That was probably the heyday of that one.
Ryan: Yeah. That was a three-part series when I was doing that. That was a lot of fun. I did the first one, and it got pretty good reception.
Chris: Uh-huh.
Ryan: I'll do another one, and then I started getting feedback from the crowd saying, like, "What do you want to see? What words do you want to see?"
Chris: Nice.
Ryan: That's sort of like a fault in the--
Chris: Yeah, so it's all verbs. It's not just jumping.
Ryan: Yeah. Yeah.
Chris: It's words where each character has a little animation to it that are evocative of whatever the word is.
Ryan: Yep. Yeah.
Chris: Falling or--
Ryan: I got the .com for that, so it's animatedverbs.com, if you haven't seen it.
Chris: Nice.
Ryan: That puts the whole collection together, which is nice.
Chris: Yeah. You're a classic use case for make a Pen--
Ryan: Yep.
Chris: Then it's so cool that it really deserves deployment with a proper URL.
Ryan: Well, yeah. CodePen is the way I start a lot of things. It's just the easiest way, I guess, because I've been using it for so long, for my brain to be like, "Okay. Let's do something really quick. Let's prototype this thing." Then evolve it from there.
Chris: Yeah.
Ryan: CodePen is actually what got me my job with Expedia. I actually had someone reach out to me based on the CodePens I was making.
Chris: Nice.
Ryan: And that's actually how I met my partner was at Expedia. Then five years later--
Chris: Wow!
Ryan: --now we're married and living in California, living that beach life. Yeah, CodePen kind of got us there.
Chris: Yeah. That's right it did.
Ryan: [Laughter]
Chris: Makes love happen.
Ryan: Thanks, CodePen.
Chris: Yeah. [Laughter] There are some classy touches on this, too. You've got the scroll snapping going.
Ryan: Yeah.
Chris: It kind of centers the word properly. I think floating is my favorite. It's tough to pick a favorite, though. They're all so fun.
Ryan: Was there ghosting? Right? I think that's what it was. I think that's my favorite. I haven't looked at it in a long time.
Chris: I published today, as we're recording, but that'll be a week ago when people are listening to this, was Amit Sheen's.
When you said ghosting, it reminded me of this letter morphing one, which would have worked really nicely with this.
Ryan: Oh...
Chris: Where the letter kind of fades away through blurring.
Ryan: I've seen that. Yeah, that's so clever. I love it. I'm a big fan of that one. I mean his work in general is really great, so a lot of inspiration from that.
Chris: Clever dude.
That one, you used splitting, but you brought your own. Obviously, brought your own creativity to the party. There's a burger boxer here, which looks like it must be that ZDOG thing.
Ryan: Mm-hmm. Yep.
Chris: It's like you have the knack for (in GSAP) for picking well-done, cool libraries and doing something extraordinary with them. Gotta love the burger boxer. [Laughter]
Ryan: That one was a lot of fun. I definitely got the axes wrong, though. If you click on them, you could spin them around. [Laughter] It's definitely not the right way.
Chris: [Laughter]
Ryan: I've been meaning to clean that up, but it's fine. It's fun. It's just supposed to be whacky.
Chris: Yeah.
Ryan: That combines, I think, ZDOG with GSAP, right? I think I used GSAP to animate them.
Chris: Oh, yeah, because it does move around. That's a good point is that I'll use GSAP for Flip. Then in my mind I'm like, "GSAP, yeah, it's the one that makes flipping easier." Or I do a scroll line. I'm like, "Yeah, GSAP. It's the scroll library." You know? Only because I don't animate that much. The proper way to think about GSAP is it can animate anything.
Ryan: Mm-hmm.
Chris: And just use it to do anything. It's not that SVG animation library. It's not that Canvas animation library. It's just an animation library.
Ryan: Yeah. It gives you so much control over timelines. Dare I say it reminds me of Flash days a little bit, and I loved Flash. [Laughter]
Chris: Yeah. [Laughter] Well, that's not -- I mean I'm sure you know that story. GreenSock was a Flash library.
Ryan: Oh, no, I didn't.
Chris: Yeah. That's where they had their come up and all their biggest success. When that died, they were like, "What...."
Ryan: What next?
Chris: I mean I don't know the exact-- Yeah, I guess we better bring the same APIs elsewhere, and now are successful in doing that.
Ryan: Wow.
Chris: Pretty cool.
Ryan: Learned something today.
Chris: [Laughter] Yeah. I should get that story more correct, probably.
Ryan: [Laughter]
Chris: Although, I'm not a paid evangelist for GreenSock. But they had been very kind to us at CodePen over the years, so we try to return the favor.
Ryan: For sure. They're great over there.
Chris: You dabble in React and such, too. Does Netlify use React? I know you're in week three.
Ryan: Yeah. There are projects that do. There are projects that use Vue. There are projects that use 11ty and all sorts of stuff. There's a wide range of things being used.
Chris: Yeah. Cool. You're no stranger to those technologies yourself, clearly.
Ryan: Yeah. Yeah. I mean I used React at my previous job for -- how long was I there? It feels like forever with the pandemic. It's hard to say.
Chris: Years?
Ryan: I think it was over 2.5 years.
Chris: Yeah. Right on.
Ryan: A lot of React knowledge came through that experience, which was great.
Chris: Yeah, it's funny. It looks like this React slider, which shares some bones to the cover cards, is actually older.
Ryan: Yeah. I wrote a Code Drops article for that, too.
Chris: Oh, it does--
Ryan: That's when I was first starting out with React. I was just kind of trying to learn React, and I decided to build this slider with it and have that parallax goodness built into it.
Chris: Yeah. It feels Code Drops, in a way. Were they like, "This demo is cool, but it should have that parallax vibe"? Were there any kind of editorial suggestions from them? I'm curious. I haven't talked to anybody that's work with them that closely.
Ryan: No. It might have been right before I worked at my previous job.
Chris: Mm-hmm.
Ryan: Gosh. I'm trying to remember. I think they reached out and asked me if I wanted to write an article about this CodePen, so I had the CodePen already done.
Chris: Oh, nice.
Ryan: Then they said, "Hey, do you want to really expand on it and tell people how you did it?" I was like, "Yeah, that would be great."
That's when I first started really writing more articles and stuff was at that point, so that was my first real publication on the Web.
Chris: Sweet.
Ryan: I guess that was related to code. Then I think I had one comment in there that calls out, "You shouldn't push React into this thing, this whole library, just to make this slider." I'm like, "Well, yeah, I know."
Chris: [Laughter]
Ryan: I'm also learning at the same time.
Chris: Yeah. Yeah. That's always tricky, right? It's a little bit like, "Screw off. What do you care?" You know?
Ryan: Yeah. Point made, for sure. I agree. This could be done with JavaScript pretty easily, but it can also be done with a framework.
Chris: If that's their opinion, you could turn your whole life into just scouring anything anybody ever made. You could question the choices that they made to build it.
Ryan: For sure.
Chris: It's not a healthy place to travel, I don't think. Although, I like your pragmatism. "Point made. Yes, this doesn't have to be in React. Cool. Got it."
Ryan: [Laughter] That's the Internet.
Chris: Yeah. Indeed. It seems to me that if this made it to Code Drops that-- You know how they don't just do one demo? They do like 15 with variations. I always appreciated that about them. But maybe not in this case because it was already done by the time you wrote it.
What are some of your favorites?
Ryan: Yeah. I think I was a big fan of that password input one. I thought that was a lot of fun. That was another one where Internet comments come out. They were like, "Oh, you shouldn't do this because then people can see your password more easily if they're standing behind you." It's like, "Well, yeah. You're not going to do this on a production site. We're just having a good time."
[Laughter]
Chris: That's funny. Even though they were kind of wrong because so many companies have switched over to having a button for revealing passwords. I know this is an extra fun way to do it, but fundamentally, it's the same idea.
Ryan: Yeah. I think it's the attention that it draws by having it switch the entire background color and beam this light onto your--
Chris: Oh, I suppose.
Ryan: [Laughter] --onto your password with a laser. But that was a fun one.
Chris: There are even new APIs. I forget the details of it, which is going to make for bad radio. Did you do the thing where, in JavaScript, you change it from type=password to type=text?
Ryan: Yes. Yep.
Chris: Right. There's some new way to do that where you don't have to do that - is my point.
Ryan: I did not know that. That's great. I'm taking notes.
Chris: Yeah. [Laughter]
Ryan: All good stuff.
Chris: Don't try it just yet. I just think the Web platform has realized--
That's my favorite thing to watch about the Web platform is when stuff like this exists for years and years, and there's momentum, thought, and thinking behind all this. Then you see a new API that says, "Oh, look. We see what you're trying to do. Why don't we make that easier and better?"
Ryan: Mm-hmm.
Chris: There's some danger in just switching it, the input type.
Ryan: Oh, yeah.
Chris: I think it can mess with your, you know, like if you use 1Password or something or built in browser stuff that it gets confused or doesn't like it in some way. If you didn't have to do that, wouldn't that be better? Why yes. Yes, it would.
Thanks so much for sharing that and the rest of these Pens. There are a bunch of Pens in this collection you put together that we didn't get a chance to talk about. Maybe we'll get a chance to do that again some time. I'd love to have you back on the show some time.
Ryan: For sure.
Chris: A pleasure to talk to you, Ryan. Is there anything you want to tell the world? Any encouragement for fellow CodePenners out there?
Ryan: Don't stop believing. Keep CodePenning.
Chris: [Laughter]
Ryan: [Laughter] I think that's the biggest thing for me. I don't think I would have learned as much without CodePen. So, being able to have this tool. And I know there are a lot of other tools out there, but this just happened to be the one I fell into.
I think being able to come here and have the community that we have with CodePen is really what pushed me to keep creating and doing these things. It's been a lot of fun that way. It's made working in tech a little bit more fun and creative than maybe it would have been without it.
Chris: Aw! That's awesome.
Ryan: And it's helped me with my career, too. I mean it's got me to where I am today, so I think just being able to come up with whacky ideas is something you should definitely push aside.
Chris: Yeah. I feel like we should have Singles Night on CodePen. You know? Knowing how well it's worked out.
Ryan: Yeah. [Laughter]
Chris: [Laughter]
Ryan: You can have my story. [Laughter]
Chris: I appreciate your time so much, and we'll talk to you soon, man. Thanks for coming on the show.
Ryan: Appreciate it. Thanks for having me.
[Radio channel adjustment]