Before diving into the powerful world of GreenSock animation, complete this essential setup to ensure a smooth learning experience throughout the tutorial.

Topics Covered in This GreenSock Tutorial:

Setting up Your Class Files

What You'll Learn

File Setup

Learn how to properly organize your GreenSock class files for development. Create your own working copy to avoid conflicts with original files.

Cross-Platform Instructions

Follow step-by-step guidance for both Mac and Windows systems. Each platform has specific keyboard shortcuts and procedures.

Setup Requirements

0/3

Creating Your Own Copy of Class Files

Throughout this comprehensive workbook, you'll be working hands-on with carefully crafted class files designed to reinforce each concept as you learn it. Rather than risk accidentally corrupting the original templates, we'll establish a dedicated workspace that's entirely yours to experiment with. This approach not only protects the source files but also gives you the freedom to make mistakes, iterate, and truly master GreenSock's animation capabilities without constraints.

  1. Clear your workspace by minimizing or hiding any open windows so you can see the Desktop clearly.
  2. Locate and open the Class Files folder on your system.

  3. Follow the instructions for your operating system below to create your personal copy:

    Mac:
    • Single-click the GSAP Class folder to select it.
    • Press Cmd–D to create an instant duplicate.
    • Rename the duplicate folder yourname-GSAP Class (replacing "yourname" with your actual name for easy identification).
    Windows:
    • Single-click the GSAP Class folder to select it.
    • Press Ctrl–C to copy the folder to your clipboard.
    • Press Ctrl–V to paste a complete copy.
    • Locate the new copy (it typically appears at the bottom of your folder list) and rename it yourname-GSAP Class for easy identification.

  4. Excellent! You now have a dedicated workspace with your own complete set of class files. This personalized environment will serve as your animation laboratory throughout the entire course—feel free to experiment boldly and push the boundaries of what's possible with GreenSock.

Mac vs Windows File Duplication

FeatureMac MethodWindows Method
SelectionClick once on GSAP Class folderClick once on GSAP Class folder
Duplication CommandPress Cmd-D to duplicatePress CTRL-C then CTRL-V
Result LocationCreates duplicate in same locationCopy may appear at bottom of folder list
Rename StepRename to yourname-GSAP ClassRename to yourname-GSAP Class
Recommended: Both methods achieve the same result - choose based on your operating system

Mac Duplication Process

1

Select Folder

Click once on the GSAP Class folder to select it from the Class Files directory

2

Duplicate

Press Cmd-D keyboard shortcut to create an immediate duplicate of the selected folder

3

Rename

Change the duplicate folder name to yourname-GSAP Class for personalized identification

Windows Duplication Process

1

Select Folder

Click once on the GSAP Class folder to select it from the Class Files directory

2

Copy and Paste

Press CTRL-C to copy, then CTRL-V to paste. The new copy may appear at the bottom of the folder list

3

Rename

Change the copied folder name to yourname-GSAP Class for personalized identification

Setup Complete

You now have your own set of class files to use throughout the class. This prevents accidental modifications to the original files and gives you a clean workspace for learning GreenSock animation techniques.