Creating Custom Easing (AnimX.defineEase)

Easing defines the "feeling" or "physics" of an animation. It determines if an animation starts slow and speeds up (ease-in), or if it bounces at the end (bounce).

AnimX comes with all the standard easing functions built-in. But what if you want a completely unique effect, like an animation that ticks forward like a clock, or stutters like a glitch?

You can define your own mathematical easing function using AnimX.defineEase(). In this guide, we will build a steps easing function step-by-step.

---

Step 1: The Easing Function

An easing function is a standard JavaScript function that takes a single number as an argument, and returns a single number.

const stepEase = (t) => {
  // We will do some math here
  return t; 
};

Understanding t (Time)

The argument t represents the linear time of the animation.

• It starts at 0.0 exactly when the animation begins.
• It ends at 1.0 exactly when the animation duration finishes.
• Halfway through the animation, t is 0.5.

Understanding the Return Value

Your function must return the progress of the animation.

• Returning 0.0 means "draw the element at its starting position".
• Returning 1.0 means "draw the element at its final position".
• Halfway through, if you return 0.5, the element will be drawn exactly in the middle.

(Note: Returning exactly what is received - return t; - produces a perfectly linear animation with no easing.)

---

Step 2: Adding the Math

We want to build a "step" easing function. This means instead of sliding smoothly, we want the animation to jump rigidly through 5 distinct steps (0%, 20%, 40%, 60%, 80%, 100%).

Let's write the math to do this.

const stepEase = (t) => {
  const steps = 5; // How many chunks we want to break the animation into
  
  // 1. First, we multiply the time (e.g. 0.5) by our steps (5).
  //    This gives us 2.5.
  const multiplied = t * steps;
  
  // 2. Next, we use Math.floor to round down to a whole number.
  //    2.5 becomes 2. This creates our rigid "step".
  const floored = Math.floor(multiplied);
  
  // 3. Finally, we divide by the steps again so our number goes back to being between 0 and 1.
  //    2 divided by 5 is 0.4.
  const finalProgress = floored / steps;
  
  return finalProgress;
};

Or, written more simply:

const stepEase = (t) => {
  const steps = 5;
  return Math.floor(t * steps) / steps; 
};

---

Step 3: Pushing the Boundaries (Optional)

What happens if you return a number less than 0 or greater than 1? AnimX fully supports this!

• Returning < 0: The animation will move backwards past its starting point. (This is how "anticipation" works).
• Returning > 1: The animation will shoot past its ending point. (This is how "bounce" and "elastic" effects work).

For our steps ease, we will stay strictly between 0 and 1, but you can get very creative with this math!

---

Step 4: Register and Use!

Once you have your mathematical function, you register it with AnimX using AnimX.defineEase(). Give it a string name (like 'steps') and pass your function.

import { animate, defineEase } from 'animx';

// Register the easing globally
defineEase('steps', stepEase);

// Use the string name in your animations!
animate('.step-box', {
  x: 200,
  duration: 2,
  ease: 'steps' // AnimX will now use your math function
});

Final Result

Here is the complete, working code in action. Notice how it rigidly ticks across the screen instead of sliding smoothly!

Click replay to execute

60 FPS