Epic battle scroll section leading into the final CTA, with a little twist! The whole idea was to...Epic battle scroll section leading into the final CTA, with a little twist! The whole idea was to...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Learning OGL by rebuilding my portfolio's floating nav, inspired by Dynamic Island.
It stays compact while you scroll, then expands on hover, with the email button splitting off in a gooey morph. The shape is a signed distance field in a fragment shader, with GSAP handling the spring motion.
#webdevelopment#creativecoding#webgl#ogl#gsap
The gooey morph where the email button splits off is really satisfying, Oska. Using a signed distance field in a fragment shader for the nav shape is a great way to learn OGL.
It’s surprising how many freelancers still build websites without scroll animations.
Scroll effects are animations triggered as users scroll up or down a page. They can add subtle motion, reveal elements, and create engaging transitions.
But in the right hands, they can transform an ordinary website into a cinematic experience.
And that’s one of the things that separates a basic website from a truly professional web experience: knowing how to use motion, timing, and storytelling to make every scroll feel intentional.
So, are you using cinematic scroll effects, or are you still building websites like it’s 2009?
Check out my profile and let’s build your next professional website.