Skip to main content
Noble Desktop in Partnership with GreenSock/1 min read

Setting Up

Build a Scroll Animation

1

Register ScrollTrigger

gsap.registerPlugin(ScrollTrigger).

2

Define the Animation

gsap.to(target, { scrollTrigger: { ... } }).

3

Set Trigger and Markers

trigger element, start position, scrub for direct linkage.

4

Test scroll forward and back

Animation should reverse cleanly.

Master Web Animation at Noble Desktop

Noble Desktop's JavaScript Development Certificate teaches modern JavaScript — the foundation behind GSAP and other animation libraries.

This tutorial guides you through the setup for your GreenSock class, including how to create and customize your own copy of class files for editing.

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.

  1. If you have any windows open, minimize or hide them so you can see the Desktop.
  2. Open the Class Files folder.

  3. 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.
    Windows:
    • 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.

  4. You now have your own set of class files to use throughout the class. Have fun!