In-Person Training

Building SVG Animations

Basic UI/UX interaction to complex responsive implementations

O’Reilly’s Boston Training Center, Boston, MA

See ticket options

Course limited to 40 people. Sign up before it sells out!

Using SVG in your web pages can be the solution to future-proofing your websites, but you have to know how to make the most of this approach. Join web animation expert Sarah Drasner for a two-day live course in O’Reilly’s Boston Training Center to learn how to work with SVG.

You’ll learn the core concepts of the SVG DOM and how to add it to a web project. You’ll discover SVG’s capabilities for responsive animation and learn practical optimization techniques. In just two days, you’ll learn how to create complex, responsive, and beautiful animations with simple and easy-to-debug code for production for a range of use cases, from UX animations to illustrations and data visualizations.

What you’ll learn—and how you can apply it

By the end of this live course, you’ll understand:

  • How to make SVG cross-browser compatible and backwards compatible
  • How to handle increased complexity with responsive development and maintaining design continuity
  • How to leverage the powerful GreenSock API to control and manipulate multiple tweens and overlapping transforms
  • The difference between different animation tools—and when to use each one

And you’ll be able to:

  • Eliminate the need for responsive or resolution image replacement
  • Design for performance
  • Create complex responsive animations that can lock together and reconfigure
  • Build stable animations that work across all browsers and devices
  • Easily create seamless and engaging complex SVG animations

This course is for you because…

  • You are a developer who builds consumer-facing interfaces
  • You haven’t worked with SVG that much, and have maybe used them in an image tag or an icon but would like to really understand the nuts and bolts of what you’re using and why
  • You’d like to work in a hands-on environment with real-time assistance from an instructor who can help get you through the gotchas to quickly advance your capabilities
  • You are a technical lead interested in understanding SVG and SVG animations and the benefits of this graphic format for performance
  • You are a curious developer interested in expanding your horizons with creative and cutting-edge programming techniques.
  • You’d like to incorporate informative data visualizations into your products

Prerequisites:

  • Basic programming experience
  • Familiarity with Git, Github, CSS, and JavaScript
  • Only limited experience with SVG required—we’ll go beyond the typical use of an SVG img tag to the understanding of SVG necessary needed to build out complex responsive implementations

Computer requirements

You’ll need to bring a laptop with a text editor or IDE and terminal capabilities, including git. Your text editor should be configured for HTML5, CSS3, and JavaScript. It would be best to also have an SVG editor such as Illustrator, Sketch, or Inkscape installed. Sarah will use Sublime Text 3, CodePen, and Illustrator.

About your instructor

Sarah Drasner

Sarah Drasner is an award-winning speaker and staff writer at CSS-Tricks. Formerly, she was Manager of UX Design & Engineering at Trulia (Zillow). She’s given a Frontend Masters workshop on Advanced SVG Animations, and is working on a book for O’Reilly on SVG Animations. Last year Sarah won CSS Dev Conf’s “Best of Best of Award” as well as “Best Code Wrangler” from CSS Design Awards.

She has worked for 15 years as a web developer and designer, and at points worked as a scientific illustrator and an undergraduate professor. Sarah loves informative animations, and welding together pieces of the DOM.

Course outline

  • Day One
  • SVG DOM
    We will begin with an overview of why you should be using SVG as a graphic format, use cases, and a basic outline of the SVG DOM. Paths create SVG shapes by specifying a series of coordinates. These coordinates can be lines or curves depending on the letter preceding them.
    • Shapes
    • Shape attributes
    • Paths
    • Path values
  • viewBox
    A breakdown of what the viewBox attribute does, as well as how to manipulate it for on-the-fly cropping.
    • viewBox
    • preserveAspectRatio
    • Paths
    • Path values
  • Generating SVG with JavaScript
    How to use JavaScript without a library to create SVGs from scratch, as well as manipulate them.
    • setAttributeNS
    • Getting and setting attributes
    • Updating attributes with requestAnimationFrame
  • Optimizing SVG
    Optimizing SVG files can greatly reduce the file size and lead to better animation performance. There are techniques to employ when using SVGs to produce results with slimmer code.
    • Exporting and some gotchas
    • Ways to produce high-performance SVGs
    • SVG optimization process
    • SVG optimization tooling
  • Animating SVG with CSS
    How CSS animations are used to animate SVG and the difference between animating them and CSS elements.
    • CSS animation syntax overview
    • Demos showing the difference between SVG and CSS elements
  • SVG sprites
    SVG sprites contain many different images within one one SVG element. We’ll go over a few ways of using them and discuss how staggering the durations can add a sense of depth to the scene.
    • SVG sprite overview
    • SVG sprites for parallax techniques
    • SVG sprites for complicated and hand-drawn movement
    • SVG sprites for responsive development
  • Designing for animation
    We’ll explore some best practices for performance, workflows for creating SVGs in Illustrator, or taking existing SVGs and adjusting them for superior quality. And we’ll talk about storyboarding and communicating animation.
    • Designing SVG
    • Working with an SVG that was designed by someone else
    • Optimizing for performance from the ground up
    • Storyboards
    • Prototyping
  • Animation technologies and performance
    We’ll go over all of the myriad technologies available for animation and some benchmarks for performance, and take a deep dive into different properties that can be animated and how they can affect layout, paint, and composite events.
    • Animation technologies comparison
    • Animatable properties comparison
    • Chrome DevTools for tracking performance
    • Other performance tools
  • GreenSock (GSAP) overview
    We’ll look at the features of the GreenSock animation library and how it can solve some of the issues that arise related to browser inconsistencies, and more complex animations.




    • GreenSock simple tween
    • GreenSock Timeline
    • GreenSock relative labels
  • GSAP staggers, CycleStagger, and function-based values
    • staggerTo, staggerFrom, staggerFromTO
    • CycleStagger
    • Function-based values
    • ModifiersPlugin
  • Draggable and motion along a path
    How to use the GreenSock plugin Draggable to retain context-shifting and hook into timeline events. We’ll cover hit-testing SVG objects and their potential use in games motion along a path for realistic movements, and even combine techniques.
    • Draggable capabilities
    • HitTest()
    • Motion along a path beziers
    • AutoRotate parameters
  • Draw SVG
    We’ll work with strokes in a way that SVGs seem like they draw themselves, learn what’s happening under the hood, and how to make animations that work without a library. We’ll then show some of the power features that GreenSock offers and work with them for more finite control of the movement
    • stroke and dasharray Values
    • Using JavaScript to get the length of a stroke
    • DrawSVG and its many features
  • Day Two
  • Morph SVG and creative animation
    We’ll use GreenSock to tween non-similar path data values between two elements and create morphing SVG animations. We’ll also cover prepping your SVGs to work with this type of animation, using findShapeIndex() to fine tune your animation, and how you can use this technique with other effects.
    • Converting to path data
    • findShapeIndex()
    • Combining MorphSVG with other techniques
  • UI/UX animation, practical animation
    We will walk through a few examples of user-driven animations.
    • Branding and animation
    • Context-shifting
    • Saccade and spatial awareness
    • GreenSock and CSS animations for user interaction
  • React-Motion, GreenSock, mo.js: A comparison of techniques
    Different ways to animate, including: CSS, GSAP, React-Motion, Velocity, and mo.js—and how to know what to use and when. We’ll cover performance concerns, the differences between these technologies in terms of sequential timing, and potential gotchas.
    • Comparison between technologies
    • How to work with React-Motion
    • Performance between techniques
    • How to work with GSAP in React (depending on student interest)
  • Games
    Functional programming as it relates to game-based animation, and why SVG is so good for games whether animating with the DOM or with Canvas.
    • Animation in games overview
    • Fun things to randomize in games
    • Basic overview and comparison of different games that use SVG
  • Data visualization
    The features of D3’s data-binding, creating simple charts and graphs and the power of data visualizations to show change and statistics.
    • D3 basics
    • Data binding
    • Under the hood comparisons
  • React + D3 (optional)
    Depending on student interest and time, we’ll go over what we just learned about D3 and apply it to declarative programming in React, step by step bringing our components over to React implementations. We’ll go over purely presentational components, and how we can extend them for powerful and beautiful data visualization presentations.
    • React declarative programming
    • Splitting up D3 functions into data binding and rendering
    • Extending implementations across a few use cases

Venue

The course will be held at the O’Reilly Boston Training Center: 2 Avenue de Lafayette, 6th floor, Boston, MA 02111

Lunch will be provided.

Travel discounts

Rental Car Discounts

Hertz

If you need a rental car while attending the conference, you may go to the Hertz Interactive Reservation System to receive the special O’Reilly discount on rental cars for the conference. Or call Hertz Reservations at (800) 654-3131 and mention code #01XY0041.

United Airline Discount

United

To receive your 3%–10% Discount on United Airlines flights to our event, you can book online at united.com and provide discount Code ZVUR591372. Or, for a $25 service fee you can call United Meetings at (800) 426-1122 where a ticketing agent can help you by phone.

Group tickets

Working as a team? Learn as a team.

Taking this course as a team ensures that everyone is on the same page and understands both the immediate and long-term and immediate goals of your project. Exploring new ideas and collaborating on exercises together is a great team-building experience; everyone on your team will have the opportunity to ask questions, discuss use cases, and learn from other participants.

For group tickets and enterprise licensing, please contact training@oreilly.com

Code of Conduct

All participants must follow our Code of Conduct, the core of which is this: an O’Reilly events should be a safe and productive environment for everyone. Read more

O’Reilly Media, Inc. assumes no responsibility or liability for the facilities or services provided by the vendors and suppliers. Anyone attending this event releases O’Reilly from any and all claims that may arise out of attending at this event.

Thanks for signing up!
We protect your privacy.
Thanks for signing up!
We protect your privacy.