CodePen Challenges 2021

It’s CodePen Challenge time again pals!
We had so much fun running this last year so we’re thrilled to be doing it again. Each week we’re giving away 2 “Shockingly Green” Club GreenSock memberships plus a lifetime of GreenSock training from Creat…


This content originally appeared on Blog and was authored by Blog

It's CodePen Challenge time again pals!

We had so much fun running this last year so we're thrilled to be doing it again. Each week we're giving away 2 "Shockingly Green" Club GreenSock memberships plus a lifetime of GreenSock training from Creative Coding Club!

 

What is a CodePen Challenge?

CodePen is a site where you can create and share small frontend web projects that you've made. You can also start with another person's creation and then modify it to become your own creation (this is called forking). 

Every month, CodePen hosts 4 weekly challenges with different themes. They host these challenges to help you improve your frontend skills, express yourself, and have some fun! 

 

How does this competition work?

Every Monday this month, check the CodePen Challenges page for the new theme, or subscribe to the newsletter.

Each week we'll provide a prompt, some inspiration and resources to get you started, then it's over to you to make something spectacular! This December we're going to be covering some classic animation principles and techniques.

At the end of the each week, our wonderfully talented and utterly lovely panel of judges will go through and pick their favorite pens. Whether you're new to animating on the web or an animation pro, we hope you'll be inspired to flex your GSAP skills.

 

Who are the judges?

Meet our lovely judges. Each week they'll be voting and also leaving tips, tricks and encouragement on your entries. Huge thanks to every one of you!

 

What's this week's challenge?

This week we're jumping into a classic animation technique for making things bounce. That's right, it's good old Squash and Stretch. This term was coined by Disney animators Frank Thomas and Ollie Johnston, and it's by far one of the most important of the 12 basic principles of animation.

Squash and stretch is best explained by how a bouncing ball will stretch as it falls and gains velocity, then squash as it hits the ground. It gives a feeling of mass, fluidity, and life in animation.

This week's template Pen includes all the GSAP plugins and a starter ball that demonstrates the "squash and stretch" bounce. Where it goes from there is up to you!

Check out this week's challenge on codepen


 

Week 1 winners!

Prompt: Ease

Congratulations to our wonderful week one winners for kicking this off in style! Ricardo Oliva Alonso and Wheatup. 🥳

Be sure to check out the rest of the submissions - there's some brilliant ones in there.


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2021-12-13T16:58:00+00:00) CodePen Challenges 2021. Retrieved from https://www.scien.cx/2021/12/13/codepen-challenges-2021/

MLA
" » CodePen Challenges 2021." Blog | Sciencx - Monday December 13, 2021, https://www.scien.cx/2021/12/13/codepen-challenges-2021/
HARVARD
Blog | Sciencx Monday December 13, 2021 » CodePen Challenges 2021., viewed ,<https://www.scien.cx/2021/12/13/codepen-challenges-2021/>
VANCOUVER
Blog | Sciencx - » CodePen Challenges 2021. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/13/codepen-challenges-2021/
CHICAGO
" » CodePen Challenges 2021." Blog | Sciencx - Accessed . https://www.scien.cx/2021/12/13/codepen-challenges-2021/
IEEE
" » CodePen Challenges 2021." Blog | Sciencx [Online]. Available: https://www.scien.cx/2021/12/13/codepen-challenges-2021/. [Accessed: ]
rf:citation
» CodePen Challenges 2021 | Blog | Sciencx | https://www.scien.cx/2021/12/13/codepen-challenges-2021/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.