Boris Margolin

Menu

Instructional Problem Overview

Creating animations for applications and the web has always been a challenge for animators and motion graphics artists. This has been due to factors such as bandwidth/file size, complex programing syntax, or browser/device capability. However new frameworks have emerged that allow animators and motion graphics artists to focus on what they do best while still being able to deliver assets that web and app developers can use. One of the more exciting of these is Lottie, developed by AirBnB. But to successfully create assets to be used by the Lottie framework animators and motion graphics artists need to understand how to plan, optimize and deliver their work. 

Instructional goal 

This course will help empower students to bring an web/app animation from concept to production and familiarize them with the Lottie Web framework and syntax. 

Target audience

Animators and motion graphics artists who need to make adaptable web animations for the web and applications. 

Practical knowledge of Adobe After Effects, and Adobe Illustrator is required for this course. Students must have access to the Internet to complete the course. 

Objectives

By the end of this course students will be able to:

  1. Plan a multiple state animation (at least 3 states).
  2. Animate at least 3 animation states.
  3. Incorporate Lottie to control the animation states. 

Authentic Assessment 

The course will be divided into 3 weeks, each week consisting of a “lecture”, exercise, and group discussion posting. Each exercise is project based with real world parameters provided, however each student will construct and control an animation that is unique to them. 

Each exercise will build on the pervious exercise with an instructor providing a grade and feedback for each exercise based on:

  • Week 1
    • Accurate description of each animations state, submitted art each animation state. 
  • Week 2:  
    • Submission of exported web animation that animates smoothly from idle state to additional animation states. 
  • Week 3:
    • Submission of animation with functioning animation controls.
    • Smooth transitions from idle to state 1 and back to idle
    • Smooth transitions from idle to state 2 and back to idle. 

Students will be permitted to resubmit their work based on instructor feedback. 

  • Exercises will amount to 66% of the grade
  • Discussion participation will amount to 34% of the grade.  This will help ensure active participation in discussions. 

Enabling Objectives

  • Week 1: Web animation formats
    By the end of week 1 will be able to:
    • Describe the different animation formats and how they are used today.  (Understand)
    • Sketch their 3 animation states (Apply).
    • Explain their animation states to instructor and other students (Evaluate).state. 
  • Week 2: After Effects + Bodymovin
    By the end of week 2 will be able to:
    • Repeat the steps necessary to install the free Bodymovin Plugin  (Remember).
    • Apply best practices for setting up an animation After Effects which will then be used with Lottie Web (Apply).
    • Complete their animation sequence (Apply).
    • Document their process and share with other students (Analyze). 
  • Week 3: Controlling with Lottie Web
    By the end of week 3 will be able to:
    • Repeat the steps necessary to create a free Codepen.io account (Remember). 
    • Determine the frames of each animation state (Evaluate). 
    • Integrate the exported animation with Lottie web (Create).
    • Incorporate Lottie web listeners and events to control the animation (Create).
    • Critique own work and two other students (Evaluate).

Course Outline

  1. Week 1
    • Lecture/Video
      1. Brief history of web animation
        • GIFs
        • Flash
      2. Modern web animation
        • SVG
        • CSS
      3. Lottie and GSAP
    • Exercise
      1. Create animation assets in Adobe Illustrator
        • Idle state 
        • Animation state 1
        • Animation state 2
      2. Submit image file of all 3 states.
        • Describe planned motion for each state
    • Discussion
      1. Post initial sketches and explain the animation states. Comment on two other student’s work. 
  2.  Week 2
    • Lecture/Video
      1. Lottie (Bodymovin) plugin 
        • Installing
        • Capabilities 
      2. Exporting and testing
        • Screen recording of process. 
    • Exercise
      1. Import Illustrator file (if starting in illustrator, skipped if building in After Effects)
        • Convert illustrator layers to shape layers
        • Check for and remove merged paths.
      2. Create animation
      3. Submit standalone Lottie html file. 
        • Describe process
    • Discussion
      1. Write about your experience with importing or creating animation assets. Comment on at least two other students experiences. 
  3. Week 3
    • Lecture/Video
      1. Lottie functions and listeners 
        • Play
        • Stop
        • Loop
        • etc
      2. Controlling with inputs (buttons)
        • Waiting for animation to finish before starting next animation.
    • Exercise
      • Setup Codepen.io
        1. Screen recording of process. 
      • Upload assets to Codepen.io
      • Setup animation controls using provided code
      • Submit link to Codepen.io project
    • Discussion
      • Post link to your codepen.io project and explain your work.
      • Critique the work of two other students. 

Course Content

The majority of the content will be created exclusively for the course. However each week will have links to additional readings and examples.

Course Introduction

Animation and the web have a long history. From the dark ages of gifs, the rise and fall of Flash, CSS3, and to the current state of SVG domination, the web was made to move. As access to the web can be achieved at virtually any point from the palm of one’s hand, it is now commonplace to encounter animation when viewing websites or using apps.  

Animation is also a key component of user experience. It provides clear indicators of action, feedback, and state changes. You see it very often in micro interactions, like when you submit a payment, or register for an event. You also see it on onboarding processes, loading/searching screens, and fully interactive experiences. 

In this course we will:

  • Explore a little history of web animation formats and how they have been used on the web. 
  • Learn about what the pros are using for web animation.
  • Plan our own web animation to be used with Bodymovin and Lottie Web.
  • Animate and export our animation from After Effects for use with Lottie Web
  • Control our exported animations with Lottie Web. 

To successfully participate this course you will need to have a working knowledge of Adobe After Effects, an email address to create a free account on codepen.io…and if it’s not obvious yet: an internet connection.  

No coding experience is necessary, I will provide you with template code and you mainly need to copy and paste it into codepen.io. You will also need to change some values in the code. However I do encourage you to explore the Lottie syntax and events so that you can create your best work. I’m here to answer questions both in the course discussions and via email. 

Anything is possible…with the right amount of planning and enough JavaScript. 

Ready to get started? 

Summative Assessment Rubric

Exercise Needs Improvement
(+1 or 0 if not submitted/participated)		 Satisfactory (+3) Exceeding (+5) Score and comments
Exercise 1 (15%)
  • Submitted 3 rudimentary sketches or initial vector based artwork.
  • Sketches/Art is visually inconsistent or clip art based.
  • Did not explain their planned animation states (idle, animation state 1, animation state 2)
  • Submitted 3 sketches or initial vector based artwork.
  • Sketches/Art shows near consistent styling
  • Explained each animation state at a high level (idle, animation state 1, animation state 2).
  • Submitted 3 nearly complete sketches or production ready vector artwork.
  • Sketches/Art shows consistent visual styling.
  • Explained each animation state at a detailed level (idle, animation state 1, animation state 2).
  • Included secondary/additional motion descriptions.
  
Exercise 2 (20%)
  • Animation is does not transition smoothly from idle to animation states 1 and 2
  • Animations have no easing applied.
  • Idle state has no motion.
  • Animation transition smoothly from idle to animation state 1 and 2.
  • Animations have basic easing applied.
  • Idle state has basic motion.
  • Additional animation states have basic motion.
  • Animation transition smoothly from idle to animation state 1 and 2.
  • Animations have motion graph easing.
  • Idle state has multiple animated elements.
  • Additional animation states have multiple animated elements.
  
Exercise 3 (29%)
  • Lottie controlled not incorporated.
  • Idle state does not loop.
  • Idle state does not transition to other animation states on command.
  • Animations states do not return to idle on completion.
  • Lottie controls implemented.
  • Idle state loops.
  • Idle state transitions to other states on command.
  • Animation states return to idle on completion.
  • Lottie controls implemented.
  • Idle state loops smoothly.
  • Idle state transitions to other states on command seamlessly.
  • Transitions wait for idle state to finish before starting next animation state.
  • Animation states return to idle on completion.
  • Idle loop restarts after completion of animation state
  
Participation (34%)
  • Did not post in all 3 discussions.
  • Did not comment on other student’s postings
  • Posted in all 3 discussions.
  • Commented on at least two other student’s postings in each discussion.
  • Posted in all 3 discussions.
  • Commented on two or more student’s postings in each discussion.
  • Drove conversation or presented new ideas.