Web Unleashed 2017

2017-09-25 00:00:00 2017-09-27 00:00:00 America/Toronto Web Unleashed 2017 Drive your career to the forefront by learning the latest tools, techniques and technologies in front-end web development. Toronto FITC Toronto

Presentation

Add to My Schedule Remove From Schedule
Workshop – Building and Animating SVGs
Animation
Intermediate
SVG
Workshop

Overview

Note: This is a full day workshop and will be held on Sunday September 24 from 10am to 5pm, and is available to those with a WORKS or WORKSHOP ticket.

Eventbrite - FITC Presents Web Unleashed 2017

When you’re visiting a site, your eyes are constantly scanning the digital landscape to create a spatial map of what it’s seeing. We are biologically trained to notice anything in this environment that’s moving- it draws our eye. Because of this, animation has the power to guide your users, define symbols and meaning, and even reflect your branding. But it has to be done well.

In this full-day workshop, Sarah will explain in detail how you can craft delightful SVG animations and everything you need to start using them in production —  both on small and large scale. We’ll cover animation in general, and then dive deep into SVG, exploring all its different facets, technical issues and gotchas, performance benefits, and possibilities for accessibility.

Objective

SVGs, with their potential for high-quality and performant graphics, have myriad uses on the web. In this course, you’ll learn how to work with SVGs to create informative graphics, build well-optimized and high performance images, and manipulate them to create UX animations and powerful illustrations.

Target Audience

You are a curious developer interested in expanding your horizons with performant and cutting-edge programming techniques.

Assumed Knowledge

Basic understanding of CSS and JavaScript.

To Bring

Please bring your own laptop (Mac or Win) with your favorite text editor. Preferred: downloaded copy of Illustrator, Inkscape, or Sketch.

Five things audiences will learn

  1. How create an informative and stable animation, or even a more complex animation that is production-ready
  2. How to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly
  3. The nuts and bolts of how SVG is used to create beautiful and powerful data visualization
  4. How to leverage the powerful GreenSock API to control and manipulate multiple tweens to create stable animations for production
  5. How to use a variety of tools and techniques to create a seamless and engaging complex SVG animation that guides your users and compliments your branding