Creative Coding Club

image of 3 columns of cells in different css units

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...

fantastic!

Mixing 🟦 drops into 🟨 makes 🟩 but eventually the blue will dilute they yellow.

🚀 DEMO
Color Dripper: codepen.io/snorkltv/pen...

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...

thx for spreading the word!

Red text with light green shadow "ScrollTrigger Multi-Colored Line Indicators" on pink background

🔴 ScrollTrigger Multi-Colored Line Indicators
at Creative Coding Club @snorkTV @creativecodingclub.com

#FreeLesson #Animation #ScrollTrigger #gsap #webdev

www.creativecodingclub.com/pages/free-s...

Clever! And nicely done.

🚀 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...

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...

Great work! Thx so much for the shout out. So glad to hear the course was helpful.

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

Pin and Horizontal Scroll ScrollTrigger (responsive) ...

Here's the demo:
codepen.io/snorkltv/pen...

YouTube video by snorklTV ScrollTrigger: Responsive Pin with Horizontal Scroll (GSAP)

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...

Nice! I appreciate the simplicity. It would be helpful to see this post and replies embedded in the blog post as a live example.

so good!

Happy Times Ahead!

YouTube video by snorklTV GSAP Games: Horse Race

If you're new to the series.. Part 1
www.youtube.com/watch?v=ZCKw...

sillly horse race (part 2) Lesson ...

Here's the demo:
codepen.io/snorkltv/pen...

YouTube video by snorklTV GSAP GAMES: Horse Race Part 2

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...

Ship it anyway You have a unique voice, and you should use it to build what you can.

#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...

✨ 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

Save 60% on my GSAP course bundle. Final Price $59

Unlock over 250 practical (and sometimes silly) GSAP lessons to help you become a better animator and creative coder

www.creativecodingclub.com/bundles/crea...

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...

YouTube video by snorklTV 99 GSAP BONUS LESSONS

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?...

Thanks so much for sharing. Always glad to see students enjoying the material and talking about it.

My very first #gsap hover effect 😅

(Sure, it could be done natively in Webflow—but that's not the point!)

Awesome! Yup, building these types of projects is a great way to learn and spark creativity. Thanks for sharing.

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...

YouTube video by snorklTV Ultimate SVG preserveAspect Ratio Tutorial

preserveAspect ratio is also mega important. I love helping you with the concepts I struggled with most.

www.youtube.com/watch?v=-FJx...

YouTube video by snorklTV Understanding SVG viewBox and viewport

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...