Learn how to prepare and manage class files for the GreenSock animation platform, an essential skill for animators and web developers. This tutorial will guide you through creating your own copy of class files, setting them up and editing them using both Mac and Windows operating systems.
Key Insights
- The tutorial covers how to set up and manage class files for the GreenSock animation platform.
- It provides a step-by-step guide on how to create your own copy of class files, instead of editing the original files.
- The tutorial provides separate instructions for Mac and Windows users to create a copy of the class files.
- For Mac users, the tutorial guides on how to select, duplicate and rename the GSAP Class folder.
- For Windows users, the tutorial gives instructions on how to select, copy, paste, and rename the GSAP Class folder.
- After completing these steps, users will have their own set of class files to use throughout the class.
This exercise is excerpted from Noble Desktop’s past web development training materials created in partnership with GreenSock. It is compatible with GreenSock version 2. To learn current skills in web development, check out our coding bootcamps in NYC and live online.
Build a Scroll Animation
-
Register ScrollTrigger
gsap.registerPlugin(ScrollTrigger).
-
Define the Animation
gsap.to(target, { scrollTrigger: { ... } }).
-
Set Trigger and Markers
trigger element, start position, scrub for direct linkage.
-
Test scroll forward and back
Animation should reverse cleanly.
Complete the following setup prior to beginning any exercises.
Topics Covered in This GreenSock Tutorial:
Setting up Your Class Files
Creating Your Own Copy of Class Files
Throughout this workbook you will be editing class files that we have prepared for you. Instead of editing the originals, we’ll have you make a copy just for yourself to edit.
- If you have any windows open, minimize or hide them so you can see the Desktop.
- Open the Class Files folder.
-
Follow the appropriate Mac or Windows instructions below:
Mac:- Click once on the GSAP Class folder to select it.
- Press Cmd–D to duplicate it.
- Rename the duplicate folder yourname-GSAP Class.
- Click once on the GSAP Class folder to select it.
- Press CTRL–C to copy it.
- Press CTRL–V to paste it.
- The new copy may be at the bottom of the list of folders. Rename it yourname-GSAP Class.
You now have your own set of class files to use throughout the class. Have fun!
