こんにちは！
KNAP足立です！
最近アニメーション作成でGSAPのScrollTriggerに触れる機会があったので、
ブログ書いてみようって思いました！🙋♂️
デモはこちら〜
See the Pen GSAP_anime02 by knap_develp (@knap_develp) on CodePen.
やってること
まず横のカーテンアニメーション！
コンテンツの左右中央を基準にして左右に開いていくっていうアニメーションにしたいので、
左に開いていくブロック(l-scroll_side_left)と右に開いていくブロック(l-scroll_side_right)をpositionを使用し、各width50%にして作成し、
jsでwidth0%にしてあげることで左右に開かせます！
あとはどこまでスクロールした時にアニメーションを動かし始めるかを設定します(js-scroll_side_triggerの一番上(top)が画面の中央(center)に来たとき)
縦のカーテンアニメーションはコンテンツ上下中央を基準に上下に開かせたいので、
横のカーテンアニメーションからはwidthがheightに変わるのとpositionで設定するのがtopとbottomに変更してjsでheight0%に指定してあげることで実装できます！
最後の横と縦がmixされたカーテンアニメーションは
左右上下に同時に開いていくアニメーションにしたいので縦と横のカーテンアニメーションブロックを引き継ぎつつjsのgsap.timelineで連続アニメーションとして指定してあげることで実装することができます。
※下記の”<“を指定してあげることで前の要素のアニメーション(width0%)と同時にアニメーションさせることができます！
scrollAnime.to('.js-scroll_mix_vertical',
{ keyframes: [
{
height: "0%",
ease: "expo.out",
duration: 2,
}
]}, "<");以上がデモとなりますー！
では本日はこのへんで〜👋
