理想の挙動を実現しようとすると一苦労なeasingアニメーション。しかしこの難解なベジェ曲線を一瞬で生成してくれる(されてる)神サービスを見つけたのでメモ。
もうドメインからしてeasingのためだけに存在してる気合の入りよう。
アクセスすると下のような図と共にeasingアニメーションの名前一覧が表示される。マウスオーバーでアニメーションの挙動をその場で確認でき、クリックするとそのアニメーションの実装方法が詳細に表示される。
解説はそれぞれ、JS、SCSS、CSS、3つでの実装方法が記載されており、全てコピペで動いてしまうという神仕様。特にCSSでの実装はベジェ曲線を自分で描画しないといけないため知識がないと一苦労だが、このチートシートさえあれば自分のような情弱でもサクっとリッチなアニメーションを作成できてしまうのである。
これは今後ほんとにお世話になりそうだ。