20170122 Web Animation Meetup

• CodePen
• Demoっぽいもの

Web Animation in general

• Animation Principles for the Web
• The Importance of Context-Shifting in UX Patterns
• An Introduction to Perceived Performance
• Responsive Huggy Laser Panda Factory

Animation Technologies

• A Comparison of Animation Technologies

CSS Animation

• CSS3: Animations vs. Transitions
• animation

GSAP (GreenSock)

• GreenSock
• GreenSock-Cheatsheet

SVG

• A Compendium of SVG Information
• Pocket Guide to Writing SVG

How to export SVG from design tools

• Tips for Creating and Exporting Better SVGs for the Web
• Exploring ways to export clean .svg icons with Sketch…the correct way

SVG Animation

• SVG Drawing Animation
• How SVG Line Animation Works

Performance

• Web Fundamentals: Rendering Performance
• スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！
• GPU Animation: Doing It Right

Other Info

• jQuery 3 supports SVG

Exercise

• Ball bouncing
• Sample: Ball bouncing with GSAP
• Frog Logo Animation