This workshop has already been published as a course!
Advanced SVG Animation
By participating along with us in the workshop, you'll learn:
- Discover how to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly
- Discover how create an informative and stable animation, or even a more complex animation that is production-ready
- Discover how to leverage the powerful GreenSock API to control and manipulate multiple tweens and overlapping transforms
- Discover how to use a variety of tools and techniques to create a seamless and engaging complex SVG animation with ease
Your (Awesome) Instructor
Spend a Full Day Immersed With a Leading SVG Animation Master
SVG is just starting to have its heyday. This trend towards heavy adoption means that people should be aware of optimization techniques, how to begin by designing for performance, and how to animate complex, responsive, and beautiful animations with simple and easy-to-debug code for production. Come join Sarah Drasner and learn the basics of the SVG Animation development and the essentials needed to start using these techniques in production environments for animations both large and small.
We'll begin by laying the fundamentals of the way that an SVG is organized, as well as familiarizing ourselves with the syntax in the SVG DOM. Then we'll move on to basic animation in SVG in CSS, and briefly discuss initial stages- how to plan your animation and how to optimize your code and design for performance. Next, we'll dive into how to access the SVG DOM in interaction, as well as the benefits and limitations of jQuery and how to solve problems in vanilla JS. We'll discuss real-life SVG animation in common UX patterns and how to create performant, responsive, and production-ready code. Finally, we'll dig deeper and explore the GreenSock Animation API. We'll set up complex animations with a number of techniques, including, but not limited to- DrawSVG, Motion Along a Path/Bezier Plugin, Draggable, Percentage-based animations, and Attr Tweens. We'll put it all together to make engaging, responsive, and performant animations. Then we'll talk about how to refine and debug our code.
- 2:30AMTroubleshooting and Debugging
- 3:30AMTroubleshooting and Debugging
- 8:30AMTech Check and Hello
- 9:00AMSVG anatomy overview
- 9:30AMOptimization, CSS Keyframe animation and the SVG DOM
- 10:30AMSVG Sprites, Performance, and Planning
- 11:00AMUI/UX SVG components and Interaction with jQuery and Vanilla JS
- 11:30AMMaking SVGs responsive and cross browser compatible
- 12:00PMLunch and Hacking
- 1:00PMPerformance statistics with SVG and various animation technologies
- 1:30PMGreenSock animation with SVG- basic syntax, setting up functions
- 3:00PMPutting it all together: responsive complex animation
- 4:30PMWrapping up
Interact with the Instructor - Online & In-Person
Is This Workshop for Me?
- Complete novice programmers are welcomed, but may find the pace of the content challenging
One Full Day Workshop Session
Replay Videos (available immediately)
October 23, 2015 - 9:30am to 5:30pm Central Daylight Time
Option 1: Attend online on our full HD live stream
Option 2: Attend in-person at HQ in Minneapolis, MN