April 2nd: Pumpkins, Planets, and Position
UX Animation Principles: Duration
The Keyframers got into the importance of staggering & duration in their latest livestream! Check out the Pen they created and watch the video linked in the description.Sponsored:
Branding: Get A FREE .design Domain Name
As a designer, clear branding is important for gaining clients or landing your next dream job. Get your FREE .design domain name for your website and email.
Easter island v4
Use your keyboard to take a tour through a beautiful animated scene from Sebastian Garcia. "Easter Island is basically a simplified Webgl 3D engine created specifically to compose scenes with my drawings".
Create a CodePen demo with GSAP
Learn how to start making GSAP demos on CodePen in this quick, step-by-step tutorial from the GreenSockLearning YouTube channel.Sponsored:
JotForm: A Powerful Tool For Developers
Easily collect high-level information with a versatile, fully customizable online form builder.
#CodePenChallenge: HTTP Status 408
The CodePen community took a little time out to wrap up the September challenge! Check out the clever designs for the 408 "Request Timeout" error, including this emojified take from Daryn St. Pierre.
Cutup #2 Margin
Nana Jeon continues her CSS tutorial series with an in-depth look at the margin property.
You can hover, and you can scroll, but whatever you do: don't click on Zed Dash's menu!
Move Spotlight Position
A handy effect for zooming in to the details of an image from Pamcy. Click the button to zoom to key features of a sweet moped.
CodePen Radio #192: Trademark
Marie and Chris are on the show to talk about the why and how of registering a trademark for CodePen.
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
Dannie Vinther explains the UX considerations and the technique behind a Netflix-style horizontal scroll design.
Cheerss Live Build: Pumpkin
Stephanie Provence got into the Halloween spirit on her Twitch channel and live-coded an animated pumpkin!
Interactive Solar System
A miniature solar system in your browser, from Ali Soueidan. "I played a little with animations, pseudo elements, fonts (as images), drop-shadows, and so on. On the bottom of the pen there is a little navigation bar which can be used to trigger events on the solar system."
Blending Mode Playground
Explore the properties of mix-blend-mode in this enlightening Pen from Lea Verou.