Fabric.js Animation Easing Demos - Interactive Examples

Animation Easing Gallery

Linear

Ease In

Ease Out

Ease In Out

Elastic

Bounce

Interactive Demo

Canvas Demo

Easing Function

Duration (ms) 1000ms

Live Controls

Animation Progress

Current Position 0, 0

Frame Rate 60 FPS

Quick Actions

Contributors

Code Examples

Basic Animation

// Basic linear animation
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});

canvas.add(rect);

rect.animate('left', 400, {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
  easing: fabric.util.ease.linear
});

Elastic Easing

// Elastic easing animation
circle.animate('top', 300, {
  duration: 1500,
  onChange: canvas.renderAll.bind(canvas),
  easing: fabric.util.ease.easeOutElastic
});

// Multiple properties
rect.animate({
  left: 400,
  top: 200,
  angle: 45
}, {
  duration: 2000,
  easing: fabric.util.ease.easeInOutQuad
});

Bounce Effect

// Bounce animation
const ball = new fabric.Circle({
  radius: 25,
  fill: 'blue',
  left: 100,
  top: 50
});

ball.animate('top', 250, {
  duration: 1000,
  easing: fabric.util.ease.easeOutBounce,
  onComplete: function() {
    console.log('Animation complete!');
  }
});

Custom Easing

// Custom easing function
function customEasing(t, b, c, d) {
  return c * (t /= d) * t * t + b;
}

// Using custom easing
object.animate('scaleX', 2, {
  duration: 800,
  easing: customEasing,
  onChange: canvas.renderAll.bind(canvas)
});

Complete Example

// Initialize canvas
const canvas = new fabric.Canvas('canvas');

// Create animated objects
const animatedRect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green'
});

canvas.add(animatedRect);

// Chain animations
animatedRect.animate('left', 300, {
  duration: 1000,
  easing: fabric.util.ease.easeInOutCubic,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function() {
    animatedRect.animate('angle', 360, {
      duration: 1000,
      easing: fabric.util.ease.easeOutElastic,
      onChange: canvas.renderAll.bind(canvas)
    });
  }
});

Performance Metrics

FPS

Current Frame Rate

Render Time

16ms

Average Frame Time

Memory Usage

45MB

Peak Memory

Objects

Animated Objects

Performance Chart

Easing Comparison

Linear

85%

EaseInOut

78%

Elastic

65%

Bounce

72%

Optimization Tips

Use object caching for complex shapes
Limit simultaneous animations to maintain 60fps
Batch render calls using requestAnimationFrame