There's a certain simple animation thing that I've been using almost since I've ever started doing anything related to graphics. I use it for rotating & moving the camera, for moving figures in a turn-based game, for moving UI elements, for smoothing volume changes in my audio lib, everywhere! So I decided I'll write about it. The trick itself is nothing new, – in fact, you've probably already heard about or even used it, – but I'll also show it in some examples and explain how it works mathematically :)
Bezier Customizer, a tool from Whimsical Animations
Create the perfect easing curve with this helpful tool!
AutoAnimate - Add motion to your apps with a single line of code
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile
Bezier Curve as Easing Function In C++
It’s been a while since my last guest post on Adam’s blog, but I’m back with something short and practical—think of it as an epilogue to this earlier post on Bézier curves in animation. The last post focused on the theory and mathematics behind Bézier curves. What it lacked was a practical perspective—an opportunity to see the implementation in action. I wanted to share with you a simple library that I have created. Its purpose is to directly represent cubic Bézier Curves as Easing Functions.
Real-time Motion Retargeting to Highly Varied User-Created Morphologies - Chris Hecker's Website
Chris Hecker[1]Â Â Bernd Raabe[2]Â Â Ryan W. Enslow[3]John DeWeese[4]Â Â Jordan Maynard[5]Â Â Kees van Prooijen[6]
Animating and Compositing | Web Browser Engineering
Complex web applications use animations when transitioning between states. These animations help users understand the state change and they improve visual polish by replacing sudden jumps with gradual changes. But to execute these animations smoothly, the browser must minimize time in each animation frame, using GPU acceleration to speed up visual effects and compositing to minimize rendering work.
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
An In-Depth look at Lerp, Smoothstep, and Shaping Functions
Computer Graphics from Scratch - Gabriel Gambetta
Behind the beautiful imagery of the latest animated movie and the realistic environments of popular videogames lie some mysterious algorithms. Computer Graphics from Scratch aims to demystify these algorithms and shows you that computer graphics can be surprisingly simple.
Free Online GIF Maker — 70+ 3D Animations | 3D Gif Maker
Free online GIF maker — turn any image into an animated GIF in seconds. 70+ effects: 3D spins, explosions, waves, glitches, and more. No sign-up required.
Anime.js | JavaScript Animation Engine
A fast, multipurpose and lightweight JavaScript animation library
🚨 Screen Studio charges $89 for this. Someone open sourced the entire thing for free. It's called OpenScreen. 8,400+ GitHub stars. You record your screen. It automatically transforms it into a polished, professional demo video. Auto-zoom into clicks. Smooth cursor animations. https://t.co/gCu83bTYX2
🚨 Screen Studio charges $89 for this. Someone open sourced the entire thing for free.It's called OpenScreen. 8,400+ GitHub stars.You record your screen. It automatically transforms it into a polished, professional demo video.Auto-zoom into clicks. Smooth cursor animations.… pic.twitter.com/gCu83bTYX2— Nav Toor (@heynavtoor) March 31, 2026
If you aren’t used to staring at math, Poisson’s equation looks a little intimidating:
Pluck
This is an interactive string simulator that uses basic Fourier math to generate audio & visuals according to where on the string you pluck from. The audio math is done on the GPU in WebGL
