Visualization resource to plot the various ease functions Dynamically gets all function names and creates buttons you can click script src https cdn plot ly plotly 2 1 0 min js script div id myDiv div script document body style minHeight 600px Interpolation Easeing Functions x 0 to 1 function easeLinear x return x function easeInSine x return 1 Math cos x Math PI 2 function easeOutSine x return Math sin x Math PI 2 function easeInOutSine x return Math cos Math PI x 1 2 function easeInQuad x return x x function easeOutQuad x return 1 1 x 1 x function easeInOutQuad x return x 0 5 2 x x 1 Math pow 2 x 2 2 2 function easeInCubic x return x x x function easeOutCubic x return 1 Math pow 1 x 3 function easeInOutCubic x return x 0 5 4 x x x 1 Math pow 2 x 2 3 2 function easeInQuart x return x x x x function easeOutQuart x return 1 Math pow 1 x 4 function easeInOutQuart x return x 0 5 8 x x x x 1 Math pow 2 x 2 4 2 function easeInQuint x return x x x x x function easeOutQuint x return 1 Math pow 1 x 5 function easeInOutQuint x return x 0 5 16 x x x x x 1 Math pow 2 x 2 5 2 function easeInExpo x return x 0 0 Math pow 2 10 x 10 function easeOutExpo x return x 1 1 1 Math pow 2 10 x function easeInOutExpo x return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 2 2 Math pow 2 20 x 10 2 function easeInCirc x return 1 Math sqrt 1 Math pow x 2 function easeOutCirc x return Math sqrt 1 Math pow x 1 2 function easeInOutCirc x return x 0 5 1 Math sqrt 1 Math pow 2 x 2 2 Math sqrt 1 Math pow 2 x 2 2 1 2 function easeInBack x const c1 1 70158 const c3 c1 1 return c3 x x x c1 x x function easeOutBack x const c1 1 70158 const c3 c1 1 return 1 c3 Math pow x 1 3 c1 Math pow x 1 2 function easeInOutBack x const c1 1 70158 const c2 c1 1 525 return x 0 5 Math pow 2 x 2 c2 1 2 x c2 2 Math pow 2 x 2 2 c2 1 x 2 2 c2 2 2 function easeInElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x 10 Math sin x 10 10 75 c4 function easeOutElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x Math sin x 10 0 75 c4 1 function easeInOutElastic x const c5 2 Math PI 4 5 return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 1 function easeInBounce x return 1 easeOutBounce 1 x function easeOutBounce x const n1 7 5625 const d1 2 75 if x 1 d1 return n1 x x else if x 2 d1 return n1 x 1 5 d1 x 0 75 else if x 2 5 d1 return n1 x 2 25 d1 x 0 9375 else return n1 x 2 625 d1 x 0 984375 function easeInOutBounce x return x 0 5 1 easeOutBounce 1 2 x 2 1 easeOutBounce 2 x 1 2 when loaded find all functions starting with the text ease function for let i in window if typeof window i toString function if window i name startsWith ease continue console log window i name let button document createElement button document body appendChild button button innerHTML window i name button onclick plotEase window i name button className easebuttons let easebuttons document getElementsByClassName easebuttons if easebuttons length 0 easebuttons 0 click plot for input 0 1 for 100 points function plotEase fn console log Plotting fn document getElementById myDiv innerHTML clear any plots let zPts let xPts let yPts for x 10 x 10 x 0 1 let zTemp let yTemp let xTemp for y 10 y 10 y 0 1 let dinx x 10 let diny y 10 let dout window fn 1 0 Math sqrt dinx dinx diny diny zTemp push dout yTemp push diny xTemp push dinx zPts push zTemp yPts push yTemp xPts push xTemp var data z zPts x xPts y yPts type surface Plotly newPlot myDiv data console log ready script Visualization resource to plot the various ease functions Dynamically gets all function names and creates buttons you can click script src https cdn plot ly plotly 2 1 0 min js script div id myDiv div script document body style minHeight 600px Interpolation Easeing Functions x 0 to 1 function easeLinear x return x function easeInSine x return 1 Math cos x Math PI 2 function easeOutSine x return Math sin x Math PI 2 function easeInOutSine x return Math cos Math PI x 1 2 function easeInQuad x return x x function easeOutQuad x return 1 1 x 1 x function easeInOutQuad x return x 0 5 2 x x 1 Math pow 2 x 2 2 2 function easeInCubic x return x x x function easeOutCubic x return 1 Math pow 1 x 3 function easeInOutCubic x return x 0 5 4 x x x 1 Math pow 2 x 2 3 2 function easeInQuart x return x x x x function easeOutQuart x return 1 Math pow 1 x 4 function easeInOutQuart x return x 0 5 8 x x x x 1 Math pow 2 x 2 4 2 function easeInQuint x return x x x x x function easeOutQuint x return 1 Math pow 1 x 5 function easeInOutQuint x return x 0 5 16 x x x x x 1 Math pow 2 x 2 5 2 function easeInExpo x return x 0 0 Math pow 2 10 x 10 function easeOutExpo x return x 1 1 1 Math pow 2 10 x function easeInOutExpo x return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 2 2 Math pow 2 20 x 10 2 function easeInCirc x return 1 Math sqrt 1 Math pow x 2 function easeOutCirc x return Math sqrt 1 Math pow x 1 2 function easeInOutCirc x return x 0 5 1 Math sqrt 1 Math pow 2 x 2 2 Math sqrt 1 Math pow 2 x 2 2 1 2 function easeInBack x const c1 1 70158 const c3 c1 1 return c3 x x x c1 x x function easeOutBack x const c1 1 70158 const c3 c1 1 return 1 c3 Math pow x 1 3 c1 Math pow x 1 2 function easeInOutBack x const c1 1 70158 const c2 c1 1 525 return x 0 5 Math pow 2 x 2 c2 1 2 x c2 2 Math pow 2 x 2 2 c2 1 x 2 2 c2 2 2 function easeInElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x 10 Math sin x 10 10 75 c4 function easeOutElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x Math sin x 10 0 75 c4 1 function easeInOutElastic x const c5 2 Math PI 4 5 return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 1 function easeInBounce x return 1 easeOutBounce 1 x function easeOutBounce x const n1 7 5625 const d1 2 75 if x 1 d1 return n1 x x else if x 2 d1 return n1 x 1 5 d1 x 0 75 else if x 2 5 d1 return n1 x 2 25 d1 x 0 9375 else return n1 x 2 625 d1 x 0 984375 function easeInOutBounce x return x 0 5 1 easeOutBounce 1 2 x 2 1 easeOutBounce 2 x 1 2 when loaded find all functions starting with the text ease function for let i in window if typeof window i toString function if window i name startsWith ease continue console log window i name let button document createElement button document body appendChild button button innerHTML window i name button onclick plotEase window i name button className easebuttons let easebuttons document getElementsByClassName easebuttons if easebuttons length 0 easebuttons 0 click plot for input 0 1 for 100 points function plotEase fn console log Plotting fn document getElementById myDiv innerHTML clear any plots let zPts let xPts let yPts for x 10 x 10 x 0 1 let zTemp let yTemp let xTemp for y 10 y 10 y 0 1 let dinx x 10 let diny y 10 let dout window fn 1 0 Math sqrt dinx dinx diny diny zTemp push dout yTemp push diny xTemp push dinx zPts push zTemp yPts push yTemp xPts push xTemp var data z zPts x xPts y yPts type surface showscale false var layout scene xaxis autorange true showgrid false zeroline false showline false autotick true visible false ticks showticklabels false yaxis autorange true showgrid false zeroline false showline false visible false autotick true ticks showticklabels false zaxis autorange true showgrid false zeroline false showline false autotick true visible false ticks showticklabels false showlegend false Plotly newPlot myDiv data layout console log ready script
function easeInSine x return 1 Math cos x Math PI 2 function easeOutSine x return Math sin x Math PI 2 function easeInOutSine x return Math cos Math PI x 1 2 function easeInQuad x return x x function easeOutQuad x return 1 1 x 1 x function easeInOutQuad x return x 0 5 2 x x 1 Math pow 2 x 2 2 2 function easeInCubic x return x x x function easeOutCubic x return 1 Math pow 1 x 3 function easeInOutCubic x return x 0 5 4 x x x 1 Math pow 2 x 2 3 2 function easeInQuart x return x x x x function easeOutQuart x return 1 Math pow 1 x 4 function easeInOutQuart x return x 0 5 8 x x x x 1 Math pow 2 x 2 4 2 function easeInQuint x return x x x x x function easeOutQuint x return 1 Math pow 1 x 5 function easeInOutQuint x return x 0 5 16 x x x x x 1 Math pow 2 x 2 5 2 function easeInExpo x return x 0 0 Math pow 2 10 x 10 function easeOutExpo x return x 1 1 1 Math pow 2 10 x function easeInOutExpo x return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 2 2 Math pow 2 20 x 10 2 function easeInCirc x return 1 Math sqrt 1 Math pow x 2 function easeOutCirc x return Math sqrt 1 Math pow x 1 2 function easeInOutCirc x return x 0 5 1 Math sqrt 1 Math pow 2 x 2 2 Math sqrt 1 Math pow 2 x 2 2 1 2 function easeInBack x const c1 1 70158 const c3 c1 1 return c3 x x x c1 x x function easeOutBack x const c1 1 70158 const c3 c1 1 return 1 c3 Math pow x 1 3 c1 Math pow x 1 2 function easeInOutBack x const c1 1 70158 const c2 c1 1 525 return x 0 5 Math pow 2 x 2 c2 1 2 x c2 2 Math pow 2 x 2 2 c2 1 x 2 2 c2 2 2 function easeInElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x 10 Math sin x 10 10 75 c4 function easeOutElastic x const c4 2 Math PI 3 return x 0 0 x 1 1 Math pow 2 10 x Math sin x 10 0 75 c4 1 function easeInOutElastic x const c5 2 Math PI 4 5 return x 0 0 x 1 1 x 0 5 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 Math pow 2 20 x 10 Math sin 20 x 11 125 c5 2 1 function easeInBounce x return 1 easeOutBounce 1 x function easeOutBounce x const n1 7 5625 const d1 2 75 if x 1 d1 return n1 x x else if x 2 d1 return n1 x 1 5 d1 x 0 75 else if x 2 5 d1 return n1 x 2 25 d1 x 0 9375 else return n1 x 2 625 d1 x 0 984375 function easeInOutBounce x return x 0 5 1 easeOutBounce 1 2 x 2 1 easeOutBounce 2 x 1 2 when loaded find all functions starting with the text ease function for let i in window if typeof window i toString function if window i name startsWith ease continue console log window i name let button document createElement button document body appendChild button button innerHTML window i name button onclick plotEase window i name button className easebuttons let easebuttons document getElementsByClassName easebuttons if easebuttons length 0 easebuttons 0 click plot for input 0 1 for 100 points function plotEase fn console log Plotting fn document getElementById myDiv innerHTML clear any plots let zPts let xPts let yPts for x 10 x 10 x 0 1 let zTemp let yTemp let xTemp for y 10 y 10 y 0 1 let dinx x 10 let diny y 10 let dout window fn 1 0 Math sqrt dinx dinx diny diny zTemp push dout yTemp push diny xTemp push dinx zPts push zTemp yPts push yTemp xPts push xTemp var data z zPts x xPts y yPts type surface showscale false var layout scene xaxis autorange true showgrid false zeroline false showline false autotick true visible false ticks showticklabels false yaxis autorange true showgrid false zeroline false showline false visible false autotick true ticks showticklabels false zaxis autorange true showgrid false zeroline false showline false autotick true visible false ticks showticklabels false showlegend false Plotly newPlot myDiv data layout console log ready script