Skip to content
This repository has been archived by the owner on May 18, 2023. It is now read-only.

luckyfoxdesign/animaworkshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Animation Workshop

How to create animation using the GSAP 3 library.

Workshop content table

Introduction

In this part, I'll show a presentation in which I'll describe the main steps of animation creation.

  • Idea
  • Image / Animation decomposition
  • Export to SVG
  • SVG code improvements
  • VSC environment settings
  • Several ways to create animations with the GSAP
  • How GSAP working

Main part

In this part, we'll be developing animation.

  • How to connect GSAP library
  • What is Timeline of animation?
  • Default parameters for objects
  • Moving an object along the X / Y axes
  • Rotation of object
  • Eases
  • Animation loop
  • Animation states: Play / Pause / Restart

Final part

  • Questions
  • Feedback

Presentation

You can view workshop presentation by the link to figma file.

Copyrights

Original image and animation belong to wangsi.