Please note: This is a two-day workshop that runs from 10 am – 4 pm 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.

Back to all