Compare Easing Functions

Each easing selection will animate the circle's radius, plus plot a progress curve. Its duration is 2 seconds.

There are three(3) basic types of animation: easeIn, easeOut, easeInOut. There are 17 core Classes that can applied to each type.
Each animation request is therefore defined via Class.type

Note: the default easing is Power1.easeOut
Choose one or both SVG images to demonstrate the easing function.

Type :easeIn :easeOut :easeInOut      
Type :easeIn :easeOut :easeInOut      
Javascript: