• Beautiful Code
  • Posts
  • 🦸 Superpowers & Superanimations – Beautiful Code #3

🦸 Superpowers & Superanimations – Beautiful Code #3

Today, I’m sharing some resources and tools that I use a lot in my day-to-day work when working on a project. The resource I like the most, and one that I believe every frontend developer should know about, is GSAP, a JavaScript library for creating any kind of animations. It's super powerful, and most websites with effects and animations use it.

Author

Marc Taulé
September 26th, 2024

Hey everyone! It’s Marc 👋

Welcome to my weekly newsletter.

Today, I’m sharing some resources and tools that I use a lot in my day-to-day work when working on a project.

The resource I like the most, and one that I believe every frontend developer should know about, is GSAP, a JavaScript library for creating any kind of animations. It's super powerful, and most websites with effects and animations use it.

Another resource I use and recently discovered is Lenis, a JavaScript library for creating smooth scroll effects so that when a user navigates your site, they feel the scroll moves at a different pace. GSAP also includes ScrollSmoother, a library that does the same thing, but Lenis is a great alternative with very little weight.

With that little introduction out of the way, here’s this week’s content! 👇

😍 Websites

🔨 Tools

Next-gen browser to build, test & debug mobile websites.

HandBrake is an open-source, GPL-licensed, multiplatform, multithreaded video transcoder.

Backend not ready? Still waiting for database access? Generate a custom dataset that you can read and write to via a REST API

🧰 Resources

GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.

GSAP is a resource that every frontend designer should know! ❤️

A JavaScript library to position floating elements and create interactions for them.

Lenis is a lightweight, robust, and performant smooth scroll library. It's designed by @darkroom.engineering to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as webgl scroll synching, parallax effects and much more

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs.

Simple online tool for designing scrollbars.

2. Carousel UI with CSS view()

Horizontal carousel where the cards grow and shrink based on scrolling, using CSS's animation-timeline: view()
Author: Adam Argyle

Move your mouse to make stars appear and watch them fade away with gravity. Made with CSS and JavaScript 🌟
Author: Amit

😂 Humor

When our code isn't feeling well…

I hope you enjoy it, and if you like it and want to support me, you can:

  • You can support me by buying me a coffee ☕️

  • Forward it to a friend and invite them to subscribe

  • Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter / X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc