Creating an HTML5 Banner Ad with GreenSock (GSAP)

Introduction

• Why JavaScript animations?
• The GreenSock Animation library

1. SVG Basics for Animation

• SVG shapes, paths, and commands
• Properly group an SVG for animation
• Export and Optimize an SVG
• Challenge: Group and export an SVG for animation
• Solution: Group and export an SVG for animation

2. GreenSock Syntax

• Tween a DOM element with the gsap.method()
• Use the gsap.set() method
• Stagger animations with GreenSock
• Control multiple tweens with gsap.timeline()
• Adding defaults to clean up timeline animations
• Change an animation with built-in eases
• Challenge: Animate the Hero SVG
• Solution: Animate the Hero SVG

3. Use the ScrollTrigger Plugin

• Adding GreenSock plugins to your project
• Select a trigger for a scroll animation
• Control your animation with the start and end parameters
• Add markers to debug your scroll animation
• Scrub animations in view
• Challenge: Add ScrollTrigger animation to the About section
• Solution: Add ScrollTrigger animation to the About section

4. Create Complex Animations with a Main Timeline

• Create reusable functions for flexibility
• Set up a main timeline animation
• Positioning animations in a timeline

Conclusion

• What else can GreenSock do?