Submitted by matt_eaton
on Sun, 10/11/2015 - 09:59 AM
In the past couple of months I have been really noticing some of the great work on Codepen. I feel like my eyes have been opened to the value that a site like Codepen has to offer. Not only can you mock up concepts and share them between friends and co-workers, but Codepen is also a great outlet for creativity. Just look at some of the creativity that goes into pens like Medusa and Huggy Laser Panda Factory. The creativity of these pens and others made me want to get involved and start writing pens of my own.
The very first pen I wrote was called "Icon Drop and Bounce." The point of this pen was to mock up a brief animation for the home page of my CV site and I felt that this was the perfect opportunity for me to get started creating pens. Icon Drop and Bounce was created with a GreenSock timeline and pure JavaScript to do a simple icon drop and then ease it back in place. This pen went so well I only wrote one iteration of this animation and it can be viewed on my CV site today.
The next pen I wrote I figured I would up-the-ante a little bit and integrate a GreenSock timeline, a random number animation, the time of day, and a codebase written in pure JavaScript to create a dynamic clock that changes the elements on the stage based upon the time of day. If the time is between the hours of 8 a.m. and 8:59 p.m. there will be a blue sky and a sun shining, but if the time is between 9 p.m. and 7:59 a.m. there will be a moon and a night sky showing up on stage. There was no real point to this pen other than to experiment with GreenSock and animating elements in random sequences.
Web Trivia Game
The next pen I wrote was to mock up an idea that I may use on a project that is still in development. I needed to created a web trivia game and I specifically wanted to test out sound effects and how they work together with timers running in the background. In this pen a user can play a trivia game with questions all centered around web development. The game needed to user pure JavaScript, sound effects, and at the end of the game the user needed to have the ability to share their score to social media. There are still bugs to work out but this pen ended up being a hit as it was picked by the creators of Codepen and ended up making the home page of Codepen! See the screen shot above.
You may have noticed on the right sidebar I created a block for Featured Pens. This will be a spot that I update from time to time with my latest and most popular pens. Check out Web Trivia Game and Night and Day and let me know if you have any recommendations for future pens.
Member for
3 years 9 monthsLong time mobile team lead with a love for network engineering, security, IoT, oss, writing, wireless, and mobile. Avid runner and determined health nut living in the greater Chicagoland area.