GSAP - 演出マシマシのアニメーション制作

Saitama.js vol.6【株式会社オープンロジ様オフィス(池袋)開催】
https://saitamajs.connpass.com/event/283162/

本スライド：https://www.canva.com/design/DAFlx6o1Od4/GzZrHR7LnEpUNnK8MhXWTQ/view?utm_content=DAFlx6o1Od4&utm_campaign=designshare&utm_medium=link&utm_source=viewer

GSAP：https://greensock.com/gsap/
DEMO：https://codepen.io/rom1000_yksbpn/pen/YzRpvez

Transcript

1. GSAP 演出マシマシの アニメーション制作 2023.06.24 Saitama.js vol.6 ＠ROM 専
2. SELF- INTRODUCTION フロントエンドをやっています （7 月末まで　　　、8 月から　　　　　　にjoin👏 ） 最近Kindle をゲットして読書捗り中ですが、 白黒なのでデザイン本が全く読めないという脆弱性に 気がつき今更困惑している ROM 専 name Twitter ：@rom1000_yksbpn other
3. WHAT IS GSAP? https://greensock.com/get-started
4. WHAT IS GSAP? https://greensock.com/get-started GreenSock Animation Platform GreenSock が提供するアニメーションツール JavaScript のDOM 操作を拡張し、 アニメーション制作をすることができる
5. WHAT IS GSAP? https://greensock.com/get-started GreenSock はかつてFlash のライブラリを提供していたが、 2012 年にJavaScript 版の提供も始めた（公式blog より） すでに公式ブログにはFlash 版のライブラリについての記事は 取り下げられていたので、歴史を深追いできなかった🥲
6. 01 02 WHAT IS GSAP? プラグインで基本構文を拡張可能 https://greensock.com/gsap-plugins/ スクロールでの制御やテキストアニメーションが 簡単に実装できます のちほどプラグインも活用したDEMO をお見せ します👀 基本構文は上記の通り メソッドは公式サイトに解説が載っています https://greensock.com/docs/v3 チートシートもあります… ！ 下敷き印刷したい👀 https://greensock.com/cheatsheet/
7. WHAT GSAP CAN DO? 基本的に、上から順に記述して上から順に実行されるので、直感 的で実装しやすい スクロール制御やテキストへのアニメーションも、プラグインな どで簡単に実装できるので、演出マシマシのWeb サイトを学習コ スト少なめに制作することができる コントローラーメソッドが用意されているので、細かいアニメー ションチェックもできる（一時停止など）
8. ❶ランダムアニメーション 10 行DEMO 最大 DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
9. DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
10. ❷テキストアニメーション 10 行DEMO 最大 https://greensock.com/textplugin/ DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
11. DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
12. ❸スクロールトリガー 10 行DEMO 最大 https://greensock.com/docs/v3/Plugins/ScrollTrigger DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
13. DEMO ： https://codepen.io/rom1000_yksbpn/pen/YzRpvez
14. MORE... timeline メソッドには、効率的に プレビューを確認できる関数が揃 っています！ 再生、一時停止、逆再生など 確認のたびレンダリングしなくて 良くなってストレスフリー🌱 DEMO にも設置しています