Creative Coding Club
banner
creativecodingclub.com
Creative Coding Club
@creativecodingclub.com
Carl S: Helping you discover the joy of Creative Coding with GSAP, JavaScript, and CSS (at times). Start learning GSAP for FREE
https://www.creativecodingclub.com/bundles/creative-coding-club
CSS Viewport Height Comparison
I built this demo so you can see dvh vs lvh vs svh all side by side on the same screen.

Notice how the Dynamic Viewport column will change as the mobile browser UI hides and reveals itself.

@codepen.io demo: cdpn.io/pen/debug/wB...
March 7, 2025 at 9:59 PM
Diving into CSS Color Mix()-ing and Dripping!
Built this gizmo so that you can grab an array of colors throughout the mixing. This array is what powers my Color Dripper.

Generate nice olkch "color-mixed" gradient and compare it to the muddy css version.

🚀 DEMO
Mixer: codepen.io/snorkltv/pen...
January 10, 2025 at 2:14 AM
Reposted by Creative Coding Club
🔴 ScrollTrigger Multi-Colored Line Indicators
at Creative Coding Club @snorkTV @creativecodingclub.com

#FreeLesson #Animation #ScrollTrigger #gsap #webdev

www.creativecodingclub.com/pages/free-s...
January 6, 2025 at 4:53 PM
Clever! And nicely done.
January 6, 2025 at 5:00 PM
🚀 Creative Coding Inspiration
Found this design on Canva and decided to take a stab at bringing it to life with HTML/CSS/GSAP.

So many things to consider. I went with a few clip-paths.

How would you do it?

codepen.io/snorkltv/ful...
December 26, 2024 at 8:30 PM
This effect comes from the lovely k72.ca/en/work.
At first glance it looks like a simple staggered reveal of some pinned panels. The height of each element is being adjusted based on its vertical position as you scroll

1 ScrollTrigger + a juicy onUpdate callback

🎁 demo: codepen.io/snorkltv/ful...
December 18, 2024 at 9:22 PM
Reposted by Creative Coding Club
So happy we could spend these past few weeks reworking our landing page at kindeo.com with @magic-juan.bsky.social
A deep dive into animations on scroll using #gsap, scroll triggers and #lenis... What a fun project it turned out to be!

Check it out: kindeo.com
December 16, 2024 at 10:31 AM
YouTube Told me "GSAP Horizontal Scroll" was the most popular search of my content last week.Here's how to set up a fully responsive, pinned, horizontal scroll section on a vertically scrolling page www.youtube.com/watch?v=_LWi...
ScrollTrigger: Responsive Pin with Horizontal Scroll (GSAP)
YouTube video by snorklTV
www.youtube.com
December 10, 2024 at 1:26 PM
Happy Times Ahead!
A new centering method is unlocked! 🔓

Now we have 635 ways to center elements.

You can use justify-self with block elements without using Flexbox or CSS Grid. One line of code to replace "margin: auto" combined with width 🤩

👉 css-tip.com/center-block...

⚠️ Chrome only for now ⚠️

#CSS
December 9, 2024 at 12:01 PM
Want to get better at JavaScript and GSAP? Build silly games. Here's Horse Race Part 2: Detecting the Loser Horse

www.youtube.com/watch?v=UPdF...
GSAP GAMES: Horse Race Part 2
YouTube video by snorklTV
www.youtube.com
December 6, 2024 at 8:20 PM
Reposted by Creative Coding Club
#blogvent day 5 is here!

I wrote about shipping things, even when you see others working on something similar to what you want to release.

cassidoo.co/post/ship-it...
Ship it anyway
You have a unique voice, and you should use it to build what you can.
cassidoo.co
December 6, 2024 at 5:40 AM
Reposted by Creative Coding Club
✨ November brought 36 stunning websites to our Webzibition! A showcase of exceptional creativity and design!

We can't wait to see what December has in store.

Explore the latest masterpieces and get inspired: tympanus.net/codrops/webz...

#webdesign #inspiration
November 29, 2024 at 1:33 PM
With GSAP's repeatRefresh:true you can make a single tween have MULTIPLE end positions and delays. In the text rotator below each heading moves 100% its height up along the y axis on each repeat.

Responsive Text Rotator with Seamless Looping (Low Code)
codepen.io/snorkltv/pen...
November 29, 2024 at 8:26 PM
Reposted by Creative Coding Club
You know me and courses, right?
**cough cough hoarder!**

But one of the ones I am actually working on is on GSAP.

Grab the lifetime, trust me! 🤓

And follow @creativecodingclub.com 🤘

youtu.be/XoKUhZdAk9I?...
99 GSAP BONUS LESSONS
YouTube video by snorklTV
youtu.be
November 29, 2024 at 1:09 AM
Reposted by Creative Coding Club
My very first #gsap hover effect 😅

(Sure, it could be done natively in Webflow—but that's not the point!)
November 28, 2024 at 10:27 PM
Reposted by Creative Coding Club
One of my all time favorite tutorials: Jumping Wavy Gauge Numbers. It uses #GSAP plugins (Draggable and Inertia) and a handy mapping utility function.

Check out my tutorial here 👇
www.motiontricks.com/wavy-gauge-n...
November 27, 2024 at 4:12 PM
If you want to master SVG animations you need to understand the viewBox and viewport. Hopefully this video helps.

🔥 Also: 99/100 FREE SVG Animation with GSAP course spots still available. See my feed for details.
www.youtube.com/watch?v=r3lq...
Understanding SVG viewBox and viewport
YouTube video by snorklTV
www.youtube.com
November 27, 2024 at 3:29 PM
I recently challenged myself to build animations with ONLY 3 circles. Here is the complete @codepen.io collection for you to explore: codepen.io/collection/y...

Lots of little @gsap.com tricks in there too 😀
Each demo is fully responsive too!
November 26, 2024 at 4:39 PM
FREE SVG ANIMATION with #GSAP
I didn't want to come on here with another Black Friday sale so I'm offering my COMPLETE SVG Animation course for free🔥(100 students with code: BLSKY)
www.creativecodingclub.com/courses/svg-...
If you enroll I only ask that you please follow and repost. Thanks!
November 26, 2024 at 3:21 PM
Hello everyone. You may have known me as @snorkltv on X and YouTube. I love showing folks how to unlock the powers of GSAP and JavaScript and build fun projects with just a little code. I've got gazillions of GSAP tips and tricks to share with you here so stay tuned.
www.youtube.com/watch?v=ZCKw...
GSAP Games: Horse Race
YouTube video by snorklTV
www.youtube.com
November 25, 2024 at 4:30 PM