Easing Comparison 1.1.1

GSAPの代表的なイージングとCSS置き換えを同じ距離・Durationで並べて再生します。

比較条件を揃えても動きは完全一致しません。Power系の一部やSine / Expo / Circ / Backは短いcubic-bezier()による近似、Bounce / Elasticはlinear()の点列です。

GSAP側はparseEaseを毎フレーム評価し、CSS側はWeb Animations APIで動かしています。実装差でも進み方がずれます。

stepsはGSAPがsteps(8)、CSSがsteps(9, jump-none)と指定が異なります。

linear() に対応していないためBounce / ElasticのCSS側はこの環境ではLinearで再生します。