Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

It's slime time! On-scroll gooey overlay based on #GLSL shader and controlled with #GSAP #ScrollTrigger. Easy to customise and (I'm proud to say it 😎) responsive Live demo & source code: Made with GSAP ScrollTrigger GSAP Hosted on CodePen.IO

Ksenia Kondrashova

8,754 subscribers

21,611 views • 2 years ago •via X (Twitter)

#GLSL #GSAP #ScrollTrigger

Anya Rossi• Live Now

Private livecam show

7 Comments

GSAP2 years ago

@CodePen you're making so much fun stuff recently! Love it

Ksenia Kondrashova2 years ago

@CodePen Awww Thank you for making my all time favorite tool! (and for all the retweets, I really appreciate it)

AssemblyAI1 year ago

Our speech-to-text models are the most accurate on the market with top rankings across industry benchmarks. - The highest accuracy rates—up to 95% - Up to 30% fewer hallucinations than other leaders - Low latency—63 minutes converts in 35 seconds Try via API for free today 👇

Ayush Gandhi2 years ago

@greensock @CodePen Amazing!

Aaron2 years ago

@greensock @CodePen cool

行歌2 years ago

@greensock @CodePen fun to play

「XΣЯØ」1 year ago

@greensock @CodePen i absolutely love this effect! 💚

Related Videos

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Ksenia Kondrashova

18,827 views • 1 year ago

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

37,791 views • 1 year ago

Just wrapped up the development of this website. Made with Webflow, GSAP & custom code. It was both fun and challenging. I'm open to more web design & development projects.

Just wrapped up the development of this website. Made with Webflow, GSAP & custom code. It was both fun and challenging. I'm open to more web design & development projects.

Abdussalam Popoola

23,088 views • 1 year ago

To celebrate GSAP going 100% FREE, we teamed up with Osmo, GSAP & Webflow to bring you 5 amazing demos + tutorials + Webflow cloneables ✨🎉 You’ll learn how to split text, scribble on hover, smash headlines, build glowing grids, and morph icons! 🔗⬇️

To celebrate GSAP going 100% FREE, we teamed up with Osmo, GSAP & Webflow to bring you 5 amazing demos + tutorials + Webflow cloneables ✨🎉 You’ll learn how to split text, scribble on hover, smash headlines, build glowing grids, and morph icons! 🔗⬇️

Codrops

13,165 views • 1 year ago

💙 Easy GSAP animation in React with useGSAP() useGSAP() automatically handles animation cleanup and more, so that you can just focus on the fun stuff. 🤘🏻 To learn more, head over to

💙 Easy GSAP animation in React with useGSAP() useGSAP() automatically handles animation cleanup and more, so that you can just focus on the fun stuff. 🤘🏻 To learn more, head over to

GSAP

50,241 views • 2 years ago

Launching something for me today: I’m working on a course. All I know about writing code in #webflow. From basic js, through animations to really advanced™ things. Live with this temporary (tiny) landing today, made w/ #webgl, #gsap and Webflow → 👀

Launching something for me today: I’m working on a course. All I know about writing code in #webflow. From basic js, through animations to really advanced™ things. Live with this temporary (tiny) landing today, made w/ #webgl, #gsap and Webflow → 👀

👀

76,678 views • 2 years ago

No, your eyes aren’t playing tricks on you. That’s a horizontal timeline in the Interactions panel (COMING SOON) 😍 ICYMI, we hosted an announcement video with Cassie Evans, Web Bae, and rachel wolan to dive in to all things GSAP (which is now 100% free for everyone!) and give you a preview of what's to come with the next generation of Webflow Interactions powered by GSAP. Give it a watch here:

No, your eyes aren’t playing tricks on you. That’s a horizontal timeline in the Interactions panel (COMING SOON) 😍 ICYMI, we hosted an announcement video with Cassie Evans, Web Bae, and rachel wolan to dive in to all things GSAP (which is now 100% free for everyone!) and give you a preview of what's to come with the next generation of Webflow Interactions powered by GSAP. Give it a watch here:

Webflow

20,860 views • 1 year ago

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign

Franco Beltramella | Webflow Expert

15,710 views • 7 months ago

Trying out PixiJS 3D with GSAP while building new features 💚 New today... render any PixiJS 2D content (including full games) onto multiple 3D meshes Built this split cube demo with live games on each face All running seamlessly on WebGPU and WebGL

Trying out PixiJS 3D with GSAP while building new features 💚 New today... render any PixiJS 2D content (including full games) onto multiple 3D meshes Built this split cube demo with live games on each face All running seamlessly on WebGPU and WebGL

PixiJS

36,177 views • 16 days ago

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇

Carl 💥 Creative Coding Club

29,409 views • 1 year ago

SwissGL Demo: Particle Lenia with alien SOUNDS! Audio is fully rendered on GPU with GLSL shaders and streamed to WebAudio thanks to the new async GPU->CPU read feature. LIVE DEMO: Press "toggleAudio" in settings for sound 4K YouTube version: Source code:

SwissGL Demo: Particle Lenia with alien SOUNDS! Audio is fully rendered on GPU with GLSL shaders and streamed to WebAudio thanks to the new async GPU->CPU read feature. LIVE DEMO: Press "toggleAudio" in settings for sound 4K YouTube version: Source code:

Alex Mordvintsev

34,572 views • 2 years ago

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

Cyd Stumpel

10,169 views • 1 year ago

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Bimo Tri. P

13,587 views • 7 months ago

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Lisha

15,978 views • 8 months ago

Had a busy couple of days, packed with interest, fun and great people, so I had to do something calm... 😊 It's a 🎡, but with #CSS. Live demo on CodePen.IO:

Had a busy couple of days, packed with interest, fun and great people, so I had to do something calm... 😊 It's a 🎡, but with #CSS. Live demo on CodePen.IO:

Amit Sheen

18,262 views • 3 years ago

Three.js visualization of a glowing planetary core with animated energy veins flowing inward from the surface. Built with custom GLSL shaders, bloom post processing, and orbit controls with switchable color themes. Sound on 🔊 Demo & source code:

Three.js visualization of a glowing planetary core with animated energy veins flowing inward from the surface. Built with custom GLSL shaders, bloom post processing, and orbit controls with switchable color themes. Sound on 🔊 Demo & source code:

Techartist

14,877 views • 4 months ago

Recap of the highlights from my Portfolio Site. I spent ~572 hours on this site. Made in Webflow with GSAP Sounds like way too much — but I used this project to learn Webflow, GSAP, animation basics, and to get a feeling for web animations. So it happened quite often that I had to rebuild modules after learning something new. Sometimes there were performance drops, which led me to rebuild even more. I used Swup JS for the first time to create a page transition. That took so much time. With this project, I also built a base boilerplate for future projects, so I can create new sites faster. And there were so many other things I tried for the first time. All in all, I learned a lot just by building. Check it out live! Link in the comments.

Recap of the highlights from my Portfolio Site. I spent ~572 hours on this site. Made in Webflow with GSAP Sounds like way too much — but I used this project to learn Webflow, GSAP, animation basics, and to get a feeling for web animations. So it happened quite often that I had to rebuild modules after learning something new. Sometimes there were performance drops, which led me to rebuild even more. I used Swup JS for the first time to create a page transition. That took so much time. With this project, I also built a base boilerplate for future projects, so I can create new sites faster. And there were so many other things I tried for the first time. All in all, I learned a lot just by building. Check it out live! Link in the comments.

Eduard Bodak

15,936 views • 1 year ago

*sigh* Yes, I'm working on it. No, it's not gonna be as good as the tailor fitted solutions, because I'm not code brained enough to make it shader based. First iteration, still missing a ton of checks and balances. Don't DM me.

sigh Yes, I'm working on it. No, it's not gonna be as good as the tailor fitted solutions, because I'm not code brained enough to make it shader based. First iteration, still missing a ton of checks and balances. Don't DM me.

Feline⚠️🧪🐈Entity

38,891 views • 1 year ago

Easy Delivery Co. now has a demo out on Steam! 🚚📦❄️ I'm also happy to officially share that I'm working with Oro Interactive to publish the game! I'm working on it full time to make the game the best it can be :3 thanks for all your love and support on it so far <3

Easy Delivery Co. now has a demo out on Steam! 🚚📦❄️ I'm also happy to officially share that I'm working with Oro Interactive to publish the game! I'm working on it full time to make the game the best it can be :3 thanks for all your love and support on it so far <3

sam c 🐈

16,812 views • 1 year ago

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:

The Bugged Dev

45,891 views • 3 months ago