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!
- Adam Kuhn
- Alex Trost
- Annie Liew
- Bruno Simon
- Carl Shooff
- Chris Gannon
- Christina Gorton
- Craig Roblewsky
- Daniel Velasquez
- Jhey Tompkins
- Pete Barr
- Shunya Koide
- Sikriti Dakua
- Steve Gardner
- Tom Miller
- Zach Saucier
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

Blog | Sciencx (2021-12-13T16:58:00+00:00) CodePen Challenges 2021. Retrieved from 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.