---
date: '2012-07-25'
title: 'Animation easing'
description: 'Animating easing in FabricJS'
thumbnail: 'animation-easing.png'
tags: ['animation', 'easing']
---

import { CodeEditor } from '../../../components/CodeEditor';
import { code } from './code';

<select id="easing">
  <option>easeInQuad</option>
  <option>easeOutQuad</option>
  <option>easeInOutQuad</option>
  <option>easeInCubic</option>
  <option>easeOutCubic</option>
  <option>easeInOutCubic</option>
  <option>easeInQuart</option>
  <option>easeOutQuart</option>
  <option>easeInOutQuart</option>
  <option>easeInQuint</option>
  <option>easeOutQuint</option>
  <option>easeInOutQuint</option>
  <option>easeInSine</option>
  <option>easeOutSine</option>
  <option>easeInOutSine</option>
  <option>easeInExpo</option>
  <option>easeOutExpo</option>
  <option>easeInOutExpo</option>
  <option>easeInCirc</option>
  <option>easeOutCirc</option>
  <option>easeInOutCirc</option>
  <option>easeInElastic</option>
  <option>easeOutElastic</option>
  <option>easeInOutElastic</option>
  <option>easeInBack</option>
  <option>easeOutBack</option>
  <option>easeInOutBack</option>
  <option>easeInBounce</option>
  <option>easeOutBounce</option>
  <option>easeInOutBounce</option>
</select>
<button id="animate">Animate</button>
<CodeEditor code={code} canvasId="c" >
    <canvas  width="600" height="500" id="c"></canvas>
</CodeEditor>