Tips

• transformとopacityをwill-changeを使ってアニメーションするだけで、 どんな変更が発生するかをブラウザに知らせることができます。 このようにして、ブラウザは事前に適切な最適化を設定することができます。
• インスタンス数はできるだけ少なくしてください。 インスタンスが増えると、その分、チェックや、値の計算、スタイルの変更が増加します。
• 一度に全ての要素をアニメーションさせたり、 あまりにも多くのプロパティをアニメーションさせないでください。 ブラウザはこのような処理を好みません。
• 短いtransitionを追加してスムーズなアニメーションを実現する方法。
  transform: translateY(var(--ty)); transition: transform .1s
• basicScrollはデフォルトで全てのpropsをグローバルに適用します。 インスタンスを増やすのではなく、 要素間で変数を再利用してみてください。