CA$349 – CA$399

SVG Animation: A Two-Day Workshop on Web Animations with Nat Cooper

Event Information

Share this event

Date and Time

Location

Location

HackerYou

485 Queen Street West

Third Floor

Toronto, ON M5V 2A9

Canada

View Map

Friends Who Are Going
Event description

Description

Please note: This is a two-day workshop that runs from 10am - 4pm on August 12th and 13th.

In this workshop, participants will deep-dive into SVG (scalable vector graphics) and learn how to build web animations using CSS, JavaScript and a powerful animation library called GreenSock. Learners will be provided with a collection of SVG assets to use during the course of the workshop, for the hands-on exercises and projects. We will cover SVG anatomy and take a closer look at shape elements, paths, groups, and the viewBox. An overview of tools and resources for SVG optimization will be covered, along with hot tips on how to keep your - often complex and unruly - SVG files organized and under control. Everything we learn will be applied to two fun animation projects that we build and customize together.

What will I learn?

  • Web animation principles
  • SVG anatomy: shape elements, paths, viewBox, defs, use
  • Tools and SVG Optimization
  • Hot tips for organizing SVG files for production
  • SVG line animation
  • CSS Animation concepts
  • GreenSock Animation Library
  • Tweening with TimelineLite/TimelineMax
  • Easing / Bezier Curves

What will I build?

Each learner will be provided with custom SVG assets that they will use in each of the 2 projects we build together over the course of two days.

  • Project 1: Loading Icon using SVG line animation
  • Project 2: Animated 404 page using GSAP

What will I need to bring?

  • Text editor of your choice
  • A CodePen account
  • SVG editing software: Adobe Illustrator, Sketch or Inkscape

What are the prerequisites?

  • Beginner to intermediate level knowledge of HTML, CSS and JavaScript.

This workshop is facilitated by Nat Cooper, Creative Director at Ladies Learning Code.

Lunch will be provided on both days! Please contact us if you have any dietary restrictions.

Refunds for HackerYou workshops will only be given if we are notified 7 days prior to the event.


Share with friends

Date and Time

Location

HackerYou

485 Queen Street West

Third Floor

Toronto, ON M5V 2A9

Canada

View Map

Save This Event

Event Saved