ã³ã¢ãã€ããGSAPïŒ
ã€ã³ã¿ã©ã¯ãã£ããŠã§ããã¯ããã«ç°¡åã§äŸ¿å©ã§ãð
ãŠã§ãäžã§çŽ æŽãããã¢ãã¡ãŒã·ã§ã³ãïŒ
JavaScript GSAPãæ£ããèµ·åãã
GSAPã䜿çšããŠäœæããBridgeã¯ããŒã³ã³ãŒãã£ã³ã°ããŒãžã (ãªã³ã¯)
ã€ã³ã¿ã©ã¯ãã£ããŠã§ãã«èå³ããæã¡ã§ããïŒ JavaScriptã䜿ã£ãŠçŽ æŽãããWebã¢ãã¡ãŒã·ã§ã³ãå®è£
ãããã§ããïŒãã¶ã€ã³ãšéçºãäž¡æ¹ã®æ¥œãã¿ãèŠéãããšã¯ã§ããŸãããïŒ GSAPã¯ãŸãã«ãã®ãããªäººã®ããã®ç»æçãªãã©ãããã©ãŒã ã§ãã
JavaScriptã®ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªãGSAP
GreenSockã«ãã£ãŠäœæãããGSAPã¯ãããã³ããšã³ãéçºè
ãUIãã¶ã€ããŒãªã©ãJavaScriptã§ç°¡åãã€äŸ¿å©ã«ã¢ãã¡ãŒã·ã§ã³ãäœæã§ããã¢ãã¡ãŒã·ã§ã³ãã©ãããã©ãŒã ã§ãã
â
ã€ã³ã¿ã©ã¯ãã£ããŠã§ãã«èå³ãããã°OKïŒ
â
HTMLãCSSïŒJavaScriptãæžãããšãç¥ã£ãŠãã誰ã§ãïŒ
ãšããã§âŠGSAPã®ããŸãã«ã匷åãªé
åã«ãããããããããGSAPãæžãããšæãã®ã¯å®¹æã§ã¯ãããŸããã
ãŸãã«ãã¡ããšãããã³ã°ã«ææžãåŠç¿è³æãèŠã€ããã®ãé£ããããã§ãã
ãããåæã«ãGSAPã¯ãŠãŒã¶ãŒã®äŸ¿å®ã®ããã«ããŸããŸãªæ©èœãæäŸããŠããŸãã
ãã®ãããã³ã¢æ©èœã ããæ£ããç¿åŸããã°ã誰ã§ãç°¡åã«æŽ»çšã§ããããã«ãªããŸãã
ãã®è¬çŸ©ãéããŠãå€ãã®äººãGSAPãšã€ã³ã¿ã©ã¯ãã£ããªWebéçºã®é
åã«å€¢äžã«ãªãããšãé¡ã£ãŠããŸãïŒ
æãç°¡åã§æ¥œããåŠã¶
GSAPã¬ã€ãA to Z
åºæ¬ãäžå€«ã«
ã³ã¢æ©èœãçè§£ããããããã«
ããŒãããšã«äžã€äžã€åããŠèª¬æããŸãã
ïŒTweenãTimelineãKeyframe...ïŒ
å®ç¿ãèªä¿¡ãæã£ãŠ
è¬çŸ©ãçµããåŸã«å®ç¿ããŠã¿ãããšãã§ãã
ç°å¢ãšèª²é¡ãæäŸããŸãã
(ããã·ã§ã³ç°å¢ææžããã³ã¿ã€ã ã©ã€ã³è³æ)
åå¿è
ã§ãå¿é
ãªã
HTML/CSS + JSåºç€ã ããç¥ã£ãŠã
ååã«åŠç¿ã§ããŸãã
ïŒCSSãJSãæ·±ãç¥ãã°ããã«è¯ãã§ãïŒïŒ
ð¡ GSAPãåŠãã ãïŒã¢ãã¡ãèŠãèŠç¹ãå€ãããŸãïŒ
ãã€ãŠã¯ããïœãããããããã ãèŠãŠæãããŠã§ãã¢ãã¡ã®åçãèŠããŸããè¬çŸ©ãèããããåãã¢ãã¡ãŒã·ã§ã³ãèŠãŠããã©ããªã¡ãœããã«ã©ããªå±æ§ã䜿ã£ãã®ããããããã®ãã£ã¬ã€æéã¯äœç§ãããã ãããããŸã§ãååèããŠãçŽæ¥å®è£
ã§ããããã«ãªããŸãã
ã«ãªãã¥ã©ã
確èªããŠã¿ãŠãã ããã

What is GSAP?
GSAPã¯GreenSockã«ãã£ãŠäœæãããã¢ãã¡ãŒã·ã§ã³ãã©ãããã©ãŒã ã§ãJavaScriptã§å¶åŸ¡ã§ãããã¹ãŠã®èŠçŽ ã«ã¢ãã¡ãŒã·ã§ã³ãé©çšã§ããŸãã ïŒCSSããããã£ãSVGãReactãCanvasãNormal Objectãªã©...ïŒãŸãã倿°ã®ãã©ãŠã¶ã®ã¯ãã¹ãã©ãŠãžã³ã°ããµããŒãããjQueryã«æ¯ã¹ãп倧20åã®é«éããã©ãŒãã³ã¹ãæäŸããŸãã

GSAPã³ã¢ãçè§£ãã
GSAP ãªããžã§ã¯ããæã£ãŠãã Property ãš Method ã GreenSock å
¬åŒããã¥ã¡ã³ããçŽæ¥ç¢ºèªããªããåŠç¿ããŸãã

Tweenãçè§£ãã
åºæ¬çãªã¢ãã¡ãŒã·ã§ã³ãé©çšãããåçãåŠç¿ããTweenã䜿ã£ãŠç°¡åãªã¢ãã¡ãŒã·ã§ã³ãçŽæ¥æ§æããŸãã

ã¿ã€ã ã©ã€ã³ãçè§£ãã
ã¿ã€ã ã©ã€ã³ã掻çšããŠã¢ãã¡ãŒã·ã§ã³ã®ã¿ã€ã ãããŒãå¶åŸ¡ããå¶åŸ¡ããæ¹æ³ãåŠã³ãŸãã

æçµçµæ
ã¢ãã¡ãŒã·ã§ã³åãããWebããŒãžã€ã³ãããçŽæ¥äœæããŸãã
ðŸ åè¬ç°å¢ãšåŠç¿è³æã®ãæ¡å
- ã¬ãã¹ã³ã§ã¯ããªã³ã©ã€ã³ããŒã¹ã®ã³ãŒããšãã£ã¿ã§ããCodePenã䜿çšããWindows / macOSç°å¢ã®äž¡æ¹ãåŠç¿ã§ããŸãã
- åŠç¿è³æã¯ããã·ã§ã³ææžãšããŠæäŸãããŸãã (ã»ã¯ã·ã§ã³ 0 - ç°å¢èšå®ã¯ã©ã¹ããŒã)
- ç°¡åãªHTMLãCSSãJavaScriptã®åºæ¬ãç¥ã£ãŠããå¿
èŠããããŸãã
Q&A ð¬
Q. ãªãGSAPãåŠã¶ã¹ãã§ããïŒ
çç£æ§ãéèŠãªWebéçºè
ã«ãšã£ãŠãçŽç²ãªJavaScriptã ãã§ã¢ãã¡ãŒã·ã§ã³ãå®è£
ããããšã¯ãšãŠãäžåçã§äžèŠã§ãããããããšãã«ããäœãããŠããããŒã«ã䜿ããšãã£ãšäŸ¿å©ã§ããããïŒéãæã§æã€ããšãªããã³ããŒã䜿ããããªãã®ã§ãã
Q. GSAPãåŠã¶ãšäœãããã§ããïŒ
ã¢ãã¡ãŒã·ã§ã³ãåæããèœåãçãŸãããã®ããã«åæããã¢ãã¡ãŒã·ã§ã³ãéåžžã«ç°¡åã«èªåã®ãããžã§ã¯ãã«åæ ããŠã¿ãããšãã§ããŸãã
Q. GSAPãåŠã¶ããšã§äœãã§ããŸããïŒ
ãã®ã¯ã©ã¹ãåè¬ããŠããã«ã€ã³ã¿ã©ã¯ãã£ãWebãäœæããããšã¯ã§ããŸããããã åºç€ã³ã¢ãåºããææ¥ãªã®ã§ãåºæ¬åºããã£ããåŠã¶ãšããèãã§åè¬ããã°åœ¹ã«ç«ã¡ãŸã:)
Q. è¬çŸ©ãèãåã«æºåãã¹ãããšã¯ãããŸããïŒ
HTMLãCSSãJavaScriptã®ãã¬ã€ã€ãŒã®ç¥èãåŠã³ãæ¥ãã®ã¯è¯ãããšã§ããããç¥ããªããŠãåŸãããšã¯ã§ããŸãããç¥ã£ãŠèããšçè§£ã®å¹
ãã¯ããã«åºãããŸãã
Q. ææ¥å
容ãã©ã®ã¬ãã«ãŸã§æ±ããŸããïŒ
ããŒã1ã¯GSAPåºç€ã¯ã©ã¹ã§ãã GSAPåºç€ææ³ãšæ©èœã«çŠç¹ãåœãŠãŠè¬çŸ©ãé²ããŸãã