#CodePenChallenge

Wasn't sure what to create for this weeks #CodePenChallenge 😕 so I put together this Pac-Man themed password reveal input with @greensock 🕹️🤓 - Pac-Man Password Input via @CodePen #webdev #animation #webdeveloper #webdesign #javascript

Everyone is talking about scroll-driven animations, but what about scroll-driven games?! So in honor of this week's #CodePenChallenge, which is all about mazes, I decided to build a maze (in pure #CSS of course) that is controlled by scrolling. 😀 You can move the two bars (vertical and horizontal), and control the movement of the player. The 'collision detection' (when the player hits a wall) is done by crossing these two animations together, as is the player's arrival at the final target. It's a pretty basic idea for now, more of a proof of concept than a game, but I hope it inspires someone to do more cool things with scroll-driven animations. 😊 The full game and all the code are as usual on @CodePen: BTW, if you go to the challenge page, you can find in the resources another maze I made, including a full video of me live-coding it. 😎

Poline is built for a smooth dev experience — simple functions per axis. But Bezier curves feel nicer for the end user. The current #CodePenChallenge @CodePen felt like a good chance to experiment. I’ll refine it more before baking it into Poline.

Grabbed some time this evening and put something together for the #CodePenChallenge 💪 This week it's skeletons and bear gets an X-Ray w/ the help of CSS variables 🐻 via @CodePen #100DaysOfCode #webdev #CodeNewbie #webdeveloper #svg #javascript #webdesign

It is done! My submission to the #CodePenChallenge on @CodePen. I give you 'Poetry in CSS'. 6 illustrated poems with soundscapes. I wanted to do 8 poems but I haven't had enough time :( Hope you enjoy it!

For this weeks #CodePenChallenge I was inspired by the useless box 😀 So here's a useless checkbox w/ @reactjs & @greensock! The more you toggle, the less pleased someone is 🐻😅 via @CodePen #100DaysOfCode #CodeNewbie #webdev #javascript #webdevelopment

Another 🤯 from Alvaro Montoro. This calculates if the year (set as a --year Custom Property) is a leap year or not entirely in CSS. (Works in everything except Chrome, unless you're using Canary w/ Web Platform Features on.) #CodePenChallenge

For this weeks #CodePenChallenge I've created a pure #CSS set of drawers using details and summary 😅 via @CodePen #webdev #webdeveloper #webdesign #css #animation #100DaysOfCode #CodeNewbie #HTML #coding #100daysofcodechallenge

Buttons that pop out from under the card in a circle, also with a neat CSS trick to not have to explictly state how many buttons there are to position. (I also increased my GIF effort budget) on @CodePen #CodePen #CodePenChallenge

The June #CodePenChallenge starts now! This month, we're working with @GreenSock Animation Platform, aka GSAP. Let's kick it off with some sequenced animation!

Coded some loaders for this week #CodePenChallenge using @greensock 🤩 @CodePen : #CodeNewbie #coder #codepen #css #webdevelopment #WebDeveloper #loader #ChallengeAccepted #challenge @chriscoyier @Netlify

For this weeks #CodePenChallenge I've created a pure CSS "whack-a-mole" type game for bustin' ghosts 👻 - Amazing what you can do with #CSS and #SVG alone 🕹️ via @CodePen #100DaysOfCode #CodeNewbie #webdev #webdevelopment #animation #webdesign #coding

Week two of the @GreenSock #CodePenChallenge starts now! This week, show us what you can do with bubbles 🛁

I made this CSS animation of marching macarons for this month's #codepenchallenge! via @CodePen

⚡️ “#CodePenChallenge: Peach Beach 🍑”

The ghost on this login form will move its eyes, mouth, and arms depending on the user actions, making the traditional login form more interactive and fun. Via @Codepen #CodePenChallenge #Halloween #HTML #CSS #JavaScript

For this weeks #CodePenChallenge I've created a POC for gamifying scrolling w/ @reactjs + @greensock 🕹️ "Neverending Noodles" - Keep scrolling for more noodles 😋 via @CodePen #100DaysOfCode #javascript #webdev #dev #reactjs #coding #CodeNewbie #css #html

Not sure how I got there but this weeks #CodepenChallenge had me creating this #CSS variable powered scene 😅 That's the joy of the challenge 😎 via @CodePen #javascript #100DaysOfCode #design #animation #webdev #Webdesign #webdeveloper #CodeNewbie #coding

3D Floating Headers. (Made for the Huge Headers #CodePenChallenge) Full code @CodePen:

Remember planetary mnemonics? 🤔 This weeks #CodePenChallenge is planets, so I made an animated block reveal that cycles through various ones using @greensock 🌍 via @CodePen #100DaysOfCode #webdev #javascript #animation #dev #coding #CodeNewbie #css #html