Mokey Swing

Mokey Swing Basics

Mokey Swing is a lightweight easing function library for JavaScript-based animations. It gives you a set of sine-wave-based transition curves you can plug into your animation loop. The name comes from the fact that it implements the classic "swing" easing curve, which starts slow, accelerates through the middle, and decelerates again at the end. The core mechanic is straightforward. You pass a normalized time value between 0 and 1 into the swing function, and it returns a new eased value. Most implementations use the formula: 0.5 minus half the cosine of pi times t, multiplied by the total distance to cover. That produces the smooth bell-curve acceleration you expect from a natural physical motion. In practice, you wrap this around whatever animation runner you're using. If you're rolling your own requestAnimationFrame loop, you just call the easing function each frame with the elapsed fraction. If you're using something like GSAP or even CSS transitions, you usually don't need Mokey Swing at all because those tools already ship with a swing-like ease built in.

Setting It Up

I pulled it from the npm registry a while back. The package is small, roughly 2KB minified. Installation is standard: npm install mokey-swing Or grab it from a CDN if you're throwing something together quick. The API is dead simple. Import it, call it with a t value, get a number back.

import swing from 'mokey-swing'; const eased = swing(0.5); // returns approximately 0.5 That's basically it. There are no configuration options. No parameters to tune. Just input a normalized time and get an eased output.

Where Mokey Swing Actually Shines

The real use case is when you're building something custom and don't want to pull in a heavy animation framework. I was working on a project where we needed to animate a custom chart tooltip following a user's mouse, and adding GSAP just for one element felt excessive. Mokey Swing gave us the motion feel we wanted without the overhead. It also works fine if you're building something in a vanilla JS environment, a small React component, or even a WebGL shader where you need to drive a uniform with eased time. The function is pure, no side effects, no dependencies. That makes it reliable in places where larger libraries break things.

A Problem I Ran Into

Here's the thing nobody mentions: the standard swing function hits exactly 0.5 at t=0.5, which is nice but can feel a bit lazy on long-duration animations. In one project I was animating a panel sliding across the screen over 800ms, and the middle of the motion felt like it dragged. The easing was too flat around the center point. The workaround was trivial. Instead of passing raw elapsed time divided by total duration, I pre-processed the time value through a slight overshoot function before handing it to swing. I added about 4% overshoot on the way in and clamped the result. The motion still had that comfortable deceleration at the end, but it moved through the middle faster. The animation went from feeling sluggish to feeling responsive. Took me about twenty minutes to implement.

What It Doesn't Do

Mokey Swing is not a solution for complex animation states. It won't handle staggered sequences, parent-child timing relationships, or reverse-and-loop patterns. If you need those, you're better off using something like Motion One or even just CSS keyframes. This is a single-purpose tool. It does one thing well and that's it. There's also the matter of precision. Because the underlying formula uses cosine, floating point errors can accumulate if you're running this thousands of times per frame in a tight loop. I noticed jitter in a particle system I was building where I called it every frame on nearly two hundred elements. Switching to a precomputed lookup table fixed the issue. Not Mokey Swing's fault, just a limitation of using transcendental functions at scale.

When to Skip It

If you're already using an animation library, skip Mokey Swing. You're adding a dependency for functionality you already have. If you're building a simple fade or a short transform under 300ms, CSS will handle it faster and with better GPU acceleration. Mokey Swing lives in the space between "I need something smoother than linear" and "I don't want a full animation framework." That's a narrow lane, but it's a useful one.