GSAP

https://gsap.com/docs/v3
Admin
GSAP is a professional-grade JavaScript animation library for the modern web, enabling developers to...
Tokens:453,118
Snippets:3,329
Trust Score:9.4
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Simplistic desktop/mobile example with gsap.matchMedia()

Source: https://gsap.com/docs/v3/GSAP/gsap.matchMedia%28%29

Simplistic desktop/mobile example: uses two media queries on the same MatchMedia object to run different setup code for viewports at least 800px wide and at most 799px wide.

```javascript
let mm = gsap.matchMedia();

mm.add("(min-width: 800px)", () => {
  // desktop setup code here...
});

mm.add("(max-width: 799px)", () => {
  // mobile setup code here...
});
```

--------------------------------

### Simple example: trigger animation on viewport entry

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger

A simple example that starts the animation when the '.box' element enters the viewport (once).

```javascript
gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500,
});
```

--------------------------------

### Get and set startTime()

Source: https://gsap.com/docs/v3/GSAP/Tween/startTime%28%29

Shows how to get the current start time by calling startTime() with no arguments, and set it by passing a number. The getter returns the current value; the setter returns the instance for chaining.

```javascript
//gets current start time
var start = myAnimation.startTime();

//sets the start time
myAnimation.startTime(2);
```

--------------------------------

### Minimal usage of expoScale ease

Source: https://gsap.com/docs/v3/Eases/SlowMo

Minimal usage example showing how to apply the expoScale ease with a scale animation. The ease is configured with the starting and ending scale values.

```javascript
// we're starting at a scale of 1 and animating to 2, so pass those into config()...
gsap.to("#image", { duration: 1, scale: 2, ease: "expoScale(1, 2)" });
```

--------------------------------

### SlowMo ease usage examples

Source: https://gsap.com/docs/v3/Eases/SlowMo

Example code demonstrating the SlowMo ease with default parameters, custom parameters, and yoyoMode for syncing an opacity tween.

```javascript
//use the default SlowMo ease (linearRatio of 0.7 and power of 0.7)
gsap.to(myText, {duration: 5, x: 600, ease: "slow"});

//this gives the exact same effect as the line above, but uses a different syntax
gsap.to(myText, {duration: 5, x: 600, ease: "slow(0.5, 0.8)"});

//now let's create an opacity tween that syncs with the above positional tween, fading it in at the beginning and out at the end
gsap.from(myText, {duration: 5, opacity: 0, ease: "slow(0.5, 0.8, true)"});
```

--------------------------------

### yoyo() Getter and Setter Example

Source: https://gsap.com/docs/v3/GSAP/Timeline/yoyo%28%29

Shows how to get the current yoyo state with tl.yoyo() and set it to true with tl.yoyo(true). The getter returns the current value, while the setter returns the instance for chaining.

```javascript
//gets current yoyo state
var yoyo = tl.yoyo();

//sets yoyo to true
tl.yoyo(true);
```

--------------------------------

### gsap.from() with opacity and y

Source: https://gsap.com/docs/v3/GSAP/gsap.from%28%29

Example showing how gsap.from() animates from specified start values to the current state, useful for animating objects onto the screen.

```javascript
// animate ".class" from an opacity of 0 and a y position of 100 (like transform: translateY(100px))
// to the current values (an opacity of 1 and y position of 0).
gsap.from(".class", { opacity: 0, y: 100, duration: 1 });
```

--------------------------------

### Using getChildren() to retrieve timeline children

Source: https://gsap.com/docs/v3/GSAP/Timeline/getChildren%28%29

This example sets up a master timeline and a nested timeline, adds tweens to both, and then demonstrates various calls to getChildren() with different parameters. It shows how to get direct children, children after a specific time, and only tweens, logging the resulting counts.

```javascript
//first, let's set up a master timeline and nested timeline:
var master = gsap.timeline({ defaults: { duration: 1 } }),
  nested = gsap.timeline();

//drop 2 tweens into the nested timeline
nested.to("#e1", { duration: 1, x: 100 }).to("#e2", { duration: 2, y: 200 });

//drop 3 tweens into the master timeline
master
  .to("#e3", { top: 200 })
  .to("#e4", { left: 100 })
  .to("#e5", { backgroundColor: "red" });

//nest the timeline:
master.add(nested);

//get only the direct children of the master timeline:
var children = master.getChildren(false, true, true);

console.log(children.length); //"3" (2 tweens and 1 timeline)

//get all of the tweens/timelines (including nested ones) that occur AFTER 0.5 seconds
children = master.getChildren(true, true, true, 0.5);

console.log(children.length); //"5" (4 tweens and 1 timeline)

//get only tweens (not timelines) of master (including nested tweens):
children = master.getChildren(true, true, false);

console.log(children.length); //"5" (5 tweens)
```

--------------------------------

### ScrollTrigger.matchMedia()

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia%28%29

Documentation for ScrollTrigger.matchMedia() method, including syntax, parameters, and example usage.

```APIDOC
## ScrollTrigger.matchMedia()

### Description
Creates media query-based breakpoints for ScrollTrigger animations. Each function is executed when the corresponding media query matches, and all ScrollTriggers created inside are automatically reverted when the breakpoint no longer matches.

### Method
matchMedia()

### Syntax
ScrollTrigger.matchMedia(vars)

### Parameters
- **vars** (Object) - Required - An object where keys are media query strings (e.g., "(min-width: 800px)") or "all", and values are functions to execute when the media query matches.

### Return Value
Returns a function that can be called to revert all ScrollTriggers created within the media query functions.

### Example
```javascript
ScrollTrigger.matchMedia({
  // desktop
  "(min-width: 800px)": function () {
    gsap.to(".panel", {
      xPercent: -100,
      scrollTrigger: {
        trigger: ".panel",
        scrub: 1,
        pin: true,
        end: "+=500",
      },
    });
  },

  // mobile
  "(max-width: 799px)": function () {
    gsap.to("#logo", {
      scale: 0.5,
      scrollTrigger: {
        trigger: ".nav-bar",
        start: "top top",
        toggleActions: "play none reverse none",
      },
    });
  },

  // all
  all: function () {
    gsap.set(".photo", { opacity: 0 });
    ScrollTrigger.batch(".photo", {
      onEnter: (elements) =>
        gsap.to(elements, { opacity: 1, stagger: 0.1, overwrite: true }),
    });
  },
});
```

### Notes
- Added in GSAP 3.4.0.
- The teardown return function capability was added in 3.5.0.
- ScrollTrigger automatically kills all ScrollTriggers created inside the media query function when that media query no longer matches.
- Use ScrollTrigger.saveStyles() to record initial inline CSS for elements so ScrollTrigger can revert them even if animations add inline styles later.
```

--------------------------------

### seek() usage examples

Source: https://gsap.com/docs/v3/GSAP/Tween/seek%28%29

Two examples showing how to use seek() to jump to exactly 2 seconds, with and without suppressing events during the initial move.

```javascript
//jumps to exactly 2 seconds
myAnimation.seek(2);

//jumps to exactly 2 seconds but doesn't suppress events during the initial move:
myAnimation.seek(2, false);
```

--------------------------------

### Usage example: getScrollLookup with containerAnimation and scrollTo

Source: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup

Shows how to use the returned function from getScrollLookup. It creates a lookup function for '.section' elements with a horizontal container animation and a start of 'center center'. Later, it uses the function to get the scroll position of a specific element and animates the window scroll to that position.

```javascript
let getPosition = getScrollLookup(".section", {
  containerAnimation: horizontalTween,
  start: "center center",
});

// then later, use the function as many times as you want to look up any of the scroll position of any ".section" element
gsap.to(window, {
  scrollTo: getPosition("#your-element"),
  duration: 1,
});
```

--------------------------------

### endTime() example with timeScale

Source: https://gsap.com/docs/v3/GSAP/Timeline/endTime%28%29

Shows how endTime() returns the finish time in the parent timeline's local time, factoring in timeScale. The example creates a 1-second tween, inserts it at 0.5 seconds, logs 1.5, then doubles timeScale and logs 1.

```javascript
var tl = gsap.timeline();

//create a 1-second tween
var tween = gsap.to(e, { duration: 1, x: 100 });

//insert the tween at 0.5 seconds into the timeline
tl.add(tween, 0.5);

console.log(tween.endTime()); //1.5

//double the speed of the tween, thus it'll finish in half the normal time
tween.timeScale(2);

console.log(tween.endTime()); //1
```

--------------------------------

### gsap.quickSetter()

Source: https://gsap.com/docs/v3/GSAP/gsap.quickSetter%28%29

Documentation for the gsap.quickSetter() method, including its signature, parameters, return value, and usage examples.

```APIDOC
## gsap.quickSetter(target, property, unit?)

### Description
Creates a highly optimized function for setting a property on a target (or set of targets) directly, bypassing the convenience features of `gsap.set()` for a performance boost of 50% - 250%. The returned function accepts a single value and applies it to the specified property.

### Method
Function call

### Signature
`gsap.quickSetter(target, property, unit?)`

### Parameters
- **target** (String | Object | Array) - Required - The target element(s) or selector(s) to set the property on.
- **property** (String) - Required - The CSS property or attribute to set (e.g., "x", "opacity", "css", "attr").
- **unit** (String) - Optional - A unit to append to the value (e.g., "px"). If omitted, no unit is appended.

### Returns
- **Function** - A function that accepts a single value and sets the property on the target(s).

### Example
```javascript
let xSetter = gsap.quickSetter("#id", "x", "px");
xSetter(150); // sets transform: translateX(150px)
```

### Notes
- Skips unit conversion, relative values, function-based values, "random()" parsing, and property-specific browser workarounds.
- Property name aliases like "translateX" are not supported; use "x" for transforms.
- For multiple properties, set `property` to "css" and pass an object, or "attr" for attributes.
- For animating values, use `gsap.quickTo()` instead.
```

--------------------------------

### ScrollTrigger.batch()

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch%28%29

Documentation for the ScrollTrigger.batch() method, including parameters and usage examples.

```APIDOC
## ScrollTrigger.batch()

### Description
Creates a ScrollTrigger that batches elements into groups and fires callbacks when the batch enters or leaves the viewport. This is useful for animating multiple elements together with staggered effects.

### Method
ScrollTrigger.batch()

### Syntax
ScrollTrigger.batch(targets, vars)

### Parameters
- **targets** (String|Array|Element) - Required - The elements to batch. Can be a CSS selector string, an array of elements, or a single element.
- **vars** (Object) - Required - Configuration object with the following properties:
  - **onEnter** (Function) - Optional - Callback fired when the batch enters the viewport. Receives the batch elements and the trigger.
  - **onLeave** (Function) - Optional - Callback fired when the batch leaves the viewport. Receives the batch elements and the trigger.
  - **onEnterBack** (Function) - Optional - Callback fired when the batch re-enters the viewport from the opposite direction.
  - **onLeaveBack** (Function) - Optional - Callback fired when the batch leaves the viewport from the opposite direction.
  - **interval** (Number) - Optional - Time window (in seconds) for batching to occur.
  - **batchMax** (Number|Function) - Optional - Maximum batch size (targets). Can be a function for dynamic values.
  - **start** (String) - Optional - ScrollTrigger start position (e.g., "20px bottom").
  - **end** (String) - Optional - ScrollTrigger end position (e.g., "top top").

### Example
```javascript
ScrollTrigger.batch(".box", {
  onEnter: (elements, triggers) => {
    gsap.to(elements, { opacity: 1, stagger: 0.15 });
    console.log(elements.length, "elements entered");
  },
  onLeave: (elements, triggers) => {
    gsap.to(elements, { opacity: 0, stagger: 0.15 });
    console.log(elements.length, "elements left");
  },
});
```

### Advanced Example
```javascript
gsap.set(".box", {y: 100});

ScrollTrigger.batch(".box", {
  interval: 0.1, // time window (in seconds) for batching to occur.
  batchMax: 3,   // maximum batch size (targets). Can be function-based for dynamic values
  onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.15, grid: [1, 3]}, overwrite: true}),
  onLeave: batch => gsap.set(batch, {opacity: 0, y: -100, overwrite: true}),
  onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
  onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 100, overwrite: true}),
  // you can also define most normal ScrollTrigger values like start, end, etc.
  start: "20px bottom",
  end: "top top"
});

// when ScrollTrigger does a refresh(), it maps all the positioning data which
// factors in transforms, but in this example we're initially setting all the ".box"
// elements to a "y" of 100 solely for the animation in which would throw off the normal
// positioning, so we use a "refreshInit" listener to reset the y temporarily. When we
// return a gsap.set() in the listener, it'll automatically revert it after the refresh()!
ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".box", {y: 0}));
```
```

--------------------------------

### from()

Source: https://gsap.com/docs/v3/GSAP/Timeline/from%28%29

Documentation for the Timeline.from() method, including parameters, return value, and usage examples.

```APIDOC
## from( target: [ Object | Array | String ], vars: Object, position: [ Number | String ] ) : self

### Description
Adds a `.from()` tween to the end of the timeline (or elsewhere using the `position` parameter) - this is a convenience method that accomplishes exactly the same thing as `add( gsap.from(...) )` but with less code.

### Method
from

### Parameters
#### target: [ Object | Array | String ]
- **target** (Object | Array | String) - Required - Target object (or array of objects) whose properties should be affected. This can also be CSS selector text like "#feature" or "h2.author" (GSAP will pass selector strings to `document.querySelectorAll()`).

#### vars: Object
- **vars** (Object) - Required - An object defining the starting values for each property that should be tweened as well as any special properties like `onComplete`, `ease`, etc.

#### position: [ Number | String ]
- **position** (Number | String) - Optional - (default = `"+=0"`) - controls the insertion point in the timeline (by default, it's the end of the timeline). See options below, or the [Position Parameter article](/resources/position-parameter.md) which has interactive timeline visualizations and a video. If you define a label that doesn't exist yet, it will **automatically be added to the end of the timeline**

### Returns
self (makes chaining easier)

### Details
Adds a [`gsap.from()`](/docs/v3/GSAP/gsap.from().md) tween to the end of the timeline (or elsewhere using the [position parameter](/resources/position-parameter.md)) - this is a convenience method that accomplishes exactly the same thing as `add( gsap.from(...) )` but with less code. For example:

```
var tl = gsap.timeline();

var tween = gsap.from(element, { duration: 1, x: 100, opacity: 0.5 });
tl.add(tween);

//this line produces the same result as the previous two lines (just shorter)
tl.from(element, { duration: 1, x: 100, opacity: 0.5 });
```

***

**See the [gsap.from() docs](/docs/v3/GSAP/gsap.from().md) for all the details and special properties available for a `from()` Tween.**

***

You can chain these calls together and use other convenience methods like [`to()`](/docs/v3/GSAP/Timeline/to().md), [`call()`](/docs/v3/GSAP/Timeline/call().md), [`set()`](/docs/v3/GSAP/Timeline/set().md), etc. to build out sequences very quickly:

```
//create a timeline that calls myFunction() when it completes
var tl = gsap.timeline({ onComplete: myFunction });

//now we'll use chaining, but break each step onto a different line for readability...

//tween element's x from -100
tl.from(element, { duration: 1, x: -100 })

  //then tween element's y to 50
  .to(element, { duration: 1, y: 50 })

  //then set element's opacity to 0.5 immediately
  .set(element, { opacity: 0 })

  //then call otherFunction()
  .call(otherFunction)

  //finally tween the rotation of all elements with the class "myClass" to 45 and stagger the start times by 0.25 seconds
  .to(".myClass", { duration: 1.5, rotation: 45, stagger: 0.25 });
```
```

--------------------------------

### zIndex

Source: https://gsap.com/docs/v3/Plugins/Draggable

The starting zIndex that gets applied by default when an element is pressed or touched. This is a static property.

```APIDOC
## zIndex

### Description
The starting zIndex that gets applied by default when an element is pressed or touched. This is a static property.

### Property
- **zIndex** (Number) - Static - The starting zIndex value.
```

--------------------------------

### gsap.matchMedia()

Source: https://gsap.com/docs/v3/GSAP/gsap.matchMedia%28%29

Creates a MatchMedia instance that can be used to add media query-specific setup functions and revert them later.

```APIDOC
## gsap.matchMedia()

### Description
Creates a MatchMedia instance that allows you to add media query-specific setup functions. When the media query matches, the associated function runs; when it stops matching, all GSAP animations and ScrollTriggers created within that function are automatically reverted.

### Method
`gsap.matchMedia()`

### Returns
- **MatchMedia** - An object with `add()` and `revert()` methods.

### Usage Example
```javascript
let mm = gsap.matchMedia();

mm.add("(min-width: 800px)", () => {
  // setup code runs when viewport is at least 800px wide
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...});

  return () => {
    // optional custom cleanup code (runs when it STOPS matching)
  };
});

// later, if we need to revert all the animations/ScrollTriggers...
mm.revert();
```

### Notes
- The media query string is exactly what you'd pass into the browser's native `window.matchMedia()`.
- The `add()` method accepts a media query string and a function. The function can optionally return a cleanup function that runs when the media query stops matching.
- The `revert()` method reverts all animations and ScrollTriggers created within the added functions.
```

--------------------------------

### SplitText.create()

Source: https://gsap.com/docs/v3/Plugins/SplitText

Documentation for the SplitText.create() method, including parameters, return value, and usage examples.

```APIDOC
## SplitText.create()

### Description
Creates a SplitText instance that splits the text of the target element(s) into lines, words, and/or characters, and returns an object with references to the split elements.

### Method
`SplitText.create()`

### Parameters
- **target** (String | Element | Array) - Required - The element(s) to split. Can be a CSS selector string, an element, or an array of elements.
- **vars** (Object) - Optional - Configuration object with the following properties:
  - **type** (String) - Optional - A comma-separated list of split types: `"lines"`, `"words"`, `"chars"`. Default: `"words"`.
  - **wordsClass** (String) - Optional - A CSS class applied to each word's `<div>`. If the class name ends with `"++"`, an incremented number is appended to each word's class. Default: `undefined`.
  - **onSplit** (Function) - Optional - A callback function that runs every time the text is split (including re-splits). The SplitText instance is passed as the first argument. If a tween or timeline is returned, the previous animation is reverted and the new one is time-synced.
  - **autoSplit** (Boolean) - Optional - When `true`, the text will automatically revert and re-split when fonts finish loading or when the element's width changes (if lines are split). Default: `false`.
  - **mask** (String) - Optional - Wraps each split element in an extra element with `visibility: clip`. Can be `"lines"`, `"words"`, or `"chars"`.

### Returns
- **SplitText instance** - An object with properties:
  - **lines** (Array) - Array of line elements (if `type` includes `"lines"`).
  - **words** (Array) - Array of word elements (if `type` includes `"words"`).
  - **chars** (Array) - Array of character elements (if `type` includes `"chars"`).
  - **revert()** (Function) - Reverts the element to its original (unsplit) state.

### Example
```js
let split = SplitText.create(".split", { type: "words, chars" });
```
```

--------------------------------

### clamp() speed effect example

Source: https://gsap.com/docs/v3/Plugins/ScrollSmoother

Uses the clamp() wrapper to keep speed effects within page bounds, preventing elements from starting offset when above the fold. Available starting in version 3.12.

```html
<div data-speed="clamp(0.5)"></div>
<!-- clamped half-speed -->
```

--------------------------------

### Usage example for progressiveBuild

Source: https://gsap.com/docs/v3/HelperFunctions/helpers/progressiveBuild

Shows how to call progressiveBuild with step functions and an optional delay. The number 1.5 adds a 1.5-second delay between step2 and step3.

```javascript
progressiveBuild(
  step1,
  step2,
  1.5, // 1.5-second delay (sprinkle between any two functions)
  step3
);
```

--------------------------------

### onStart

Source: https://gsap.com/docs/v3/GSAP/Tween

A function to call when the animation begins.

```APIDOC
## onStart

### Description
A function to call when the animation begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).

### Usage
Set this property to a function.

### Example
```javascript
gsap.to(obj, { x: 100, onStart: () => console.log("started") });
```
```

--------------------------------

### Track and get velocity with VelocityTracker.track()

Source: https://gsap.com/docs/v3/Plugins/InertiaPlugin/VelocityTracker

Use the static VelocityTracker.track() method to start tracking properties and then retrieve their velocity with get(). At least 100ms and 2 ticks of the core tweening engine must have elapsed before checking velocity for accurate results.

```javascript
// first, start tracking "x" and "y":
var tracker = VelocityTracker.track(obj, "x,y")[0];
//then, after at least 100ms and 2 "ticks", we can get the velocity of each property:
var vx = tracker.get("x");var vy = tracker.get("y");
```

--------------------------------

### Using startTime() getter and setter

Source: https://gsap.com/docs/v3/GSAP/Timeline/startTime%28%29

Shows how to use the startTime() method as a getter (no parameter) and as a setter (with a numeric value). The getter returns the current start time, while the setter sets it and returns the instance for chaining.

```javascript
//gets current start time
var start = tl.startTime();

//sets
tl.startTime(2);
```

--------------------------------

### Observer.getAll()

Source: https://gsap.com/docs/v3/Plugins/Observer/static.getAll%28%29

Gets an Array of all Observers that have been created (and not killed). This can be useful if, for example, your framework requires that you kill everything like on a routing change.

```APIDOC
## Observer.getAll()

### Description
Gets an Array of all Observers that have been created (and not killed). This can be useful if, for example, your framework requires that you kill everything like on a routing change.

### Method
`Observer.getAll()`

### Returns
- **Array** - An Array of Observer instances

### Example
js
Observer.getAll((o) => o.kill());

```

--------------------------------

### GSAP transformOrigin examples

Source: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS

Three GSAP examples showing how to set transformOrigin with keywords, pixel offsets, and a 3D value. The first spins around the top-left corner, the second spins/scales around a point offset 50px, 20px, and the third rotates around a point 400px back in 3D space.

```javascript
//spins around the element's top left corner
gsap.to(element, {
  duration: 2,
  rotation: 360,
  transformOrigin: "left top",
});
```

```javascript
//spins/scales around a point offset from the top left by 50px, 20px
gsap.to(element, {
  duration: 2,
  rotation: 270,
  scale: 0.5,
  transformOrigin: "50px 20px",
});
```

```javascript
//rotates around a point that is 400px back in 3D space, creating an interesting effect:
gsap.to(element, {
  duration: 2,
  rotationY: 360,
  transformOrigin: "50% 50% -400px",
});
```

--------------------------------

### gsap.fromTo() with Sequencing and immediateRender

Source: https://gsap.com/docs/v3/GSAP/gsap.fromTo%28%29

Covers sequencing tweens with delays and timelines, and explains the immediateRender behavior in fromTo() tweens.

```APIDOC
## gsap.fromTo() with Sequencing and immediateRender

### Description
For sequencing, use `delay` on each tween or better, use a Timeline. This section also explains the `immediateRender` behavior in `fromTo()` tweens.

### Method
gsap.fromTo()

### Syntax
gsap.fromTo(target, fromVars, toVars)

### Parameters
- **target** (string|Element|Array) - Required - The target element(s) to animate.
- **fromVars** (object) - Required - The starting values.
- **toVars** (object) - Required - The ending values, including optional `delay` and `immediateRender`.

### Sequencing with delay
Use `delay` to offset the start of a tween.

### Example
```javascript
gsap.fromTo(".class", { x: 50 }, { delay: 0.5, duration: 1, x: 100 });
```

### Sequencing with Timeline
For complex sequences, use a Timeline with its `to()`, `from()`, and `fromTo()` methods.

### immediateRender Behavior
By default, `immediateRender` is `true` in `fromTo()` tweens, meaning the starting state is rendered immediately regardless of delay. Set `immediateRender: false` to wait until the tween begins.

### Example with immediateRender
```javascript
gsap.fromTo(obj, { opacity: 0 }, { duration: 1.5, opacity: 1, delay: 2 });
```
This immediately sets opacity to 0, then waits 2 seconds before tweening to 1 over 1.5 seconds.
```

--------------------------------

### onLeaveBack callback example

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger

Callback for when scroll moves backward past the start. Receives the ScrollTrigger instance with properties like progress, direction, isActive.

```javascript
onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
```

--------------------------------

### ScrollTrigger.matchMedia() responsive setup

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia%28%29

Use ScrollTrigger.matchMedia() to set up ScrollTriggers that are automatically reverted/killed when their media query no longer matches. The 'all' key creates ScrollTriggers that persist regardless of viewport size. Combine with ScrollTrigger.saveStyles() to record inline styles so they revert correctly when the media query stops matching.

```javascript
ScrollTrigger.matchMedia({
  // large
  "(min-width: 960px)": function () {
    // setup animations and ScrollTriggers for screens 960px wide or greater...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
  },

  // medium
  "(min-width: 600px) and (max-width: 959px)": function () {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
  },

  // small
  "(max-width: 599px)": function () {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
  },

  // all
  all: function () {
    // ScrollTriggers created here aren't associated with a particular media query,
    // so they persist.
  },
});
```

--------------------------------

### onEnter callback example

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger

Callback for when the scroll position moves forward past the start. Receives the ScrollTrigger instance with properties like progress, direction, and isActive.

```javascript
onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
```

--------------------------------

### MotionPathHelper.create with config object

Source: https://gsap.com/docs/v3/Plugins/MotionPathHelper

Sample code showing MotionPathHelper.create() with a config object. Options include path, pathWidth, pathColor, pathOpacity, selected, start, end, duration, and ease.

```javascript
MotionPathHelper.create("#elementID", {  
  path: "#path",  
  pathWidth: 5,  
  pathColor: "red",  
  pathOpacity: 0.6,  
  selected: true,  
  start: 0.1,  
  end: 1,  
  duration: 5,  
  ease: "power2.inOut",  
});  
```

--------------------------------

### Using .previous() to set start based on previous trigger's end

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/previous%28%29

Use this in advanced scenarios to base a ScrollTrigger's start value on the previous trigger's end. The callback receives the current trigger instance and calls .previous().end to get the end of the previous trigger.

```javascript
ScrollTrigger.create({
  start: self => self.previous().end, // start at the end of the previous ScrollTrigger
  ...
});
```

--------------------------------

### gsap.matchMedia() minimal usage

Source: https://gsap.com/docs/v3/GSAP/gsap.matchMedia%28%29

Minimal usage of gsap.matchMedia(): create a MatchMedia instance, add a media query with a setup function that runs only when the query matches, optionally return a cleanup function that runs when it stops matching, and call mm.revert() to revert all animations and ScrollTriggers created inside.

```javascript
// create
let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {

  // this setup code only runs when viewport is at least 800px wide
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...});

  return () => { // optional
    // custom cleanup code here (runs when it STOPS matching)
  };
});

// later, if we need to revert all the animations/ScrollTriggers...
mm.revert();
```

--------------------------------

### Get velocity from stored smoother instance

Source: https://gsap.com/docs/v3/Plugins/ScrollSmoother/getVelocity%28%29

Store the ScrollSmoother instance in a variable and call getVelocity() later, for example in an event listener, to retrieve the current velocity in pixels-per-second.

```javascript
let smoother = ScrollSmoother.create({...});

button.addEventListener("click", () => {
  console.log("velocity:", smoother.getVelocity());
});
```

--------------------------------

### Combine quickSetter with pipe, clamp, and snap

Source: https://gsap.com/docs/v3/GSAP/gsap.quickSetter%28%29

Creates a quickSetter for the x property of #id, clamped to 0-100 and snapped to increments of 5. Calling xSetter(150) sets translateX(100px) and xSetter(3) sets 5px.

```javascript
let xSetter = gsap.utils.pipe(
    gsap.utils.clamp(0, 100),    //make sure the number is between 0 and 100
    gsap.utils.snap(5),          //snap to the closest increment of 5
    gsap.quickSetter("#id", "x", "px") //apply it to the #id element's x property and append a "px" unit
  );

//then later...
xSetter(150) //sets the #el's transform to translateX(100px) (clamped to 100)
xSetter(3)   //sets it to 5px (snapped)
...
```

--------------------------------

### CSS rules for .myClass and .myClass::before

Source: https://gsap.com/docs/v3/Plugins/CSSRulePlugin

Example CSS rules for a class and its ::before pseudo-element, used to demonstrate CSSRulePlugin.getRule().

```css
.myClass {
    color: #FF0000;
}
.myClass::before {
    content: "This content is before.";
    color: #00FF00;
}
```

--------------------------------

### Create ScrollTrigger and log .vars object

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/vars

Creates a ScrollTrigger instance with trigger, start, and end settings, then logs the .vars object. The example shows the output of console.log(st.vars).

```JavaScript
let st = ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  end: "+=500",
});

console.log(st.vars); // {trigger: ".trigger", start: "top center", end: "+=500"}

```

--------------------------------

### onStartParams

Source: https://gsap.com/docs/v3/GSAP/Tween

An Array of parameters to pass to the onStart function.

```APIDOC
## onStartParams

### Description
An Array of parameters to pass the onStart function.

### Usage
Set this property to an array of values.

### Example
```javascript
gsap.to(obj, { x: 100, onStart: myFunction, onStartParams: ["param1"] });
```
```

--------------------------------

### ScrollTrigger.create() example

Source: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.create%28%29

Creates a standalone ScrollTrigger instance with trigger, start, endTrigger, end, and callback options. The onToggle callback logs the active state, and the onUpdate callback logs progress, direction, and velocity.

```javascript
ScrollTrigger.create({
  trigger: "#id",
  start: "top top",
  endTrigger: "#otherID",
  end: "bottom 50%+=100px",
  onToggle: (self) => console.log("toggled, isActive:", self.isActive),
  onUpdate: (self) => {
    console.log(
      "progress:",
      self.progress.toFixed(3),
      "direction:",
      self.direction,
      "velocity",
      self.getVelocity()
    );
  },
});
```

--------------------------------

### Simple morphing examples

Source: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

Shows basic usage of morphSVG with selector strings, SVG elements, raw path data, and polygon points.

```javascript
// selector string (grabs the data from the corresponding element's "d" attribute)
gsap.to("#diamond", { morphSVG: "#lightning" });

// an SVG element
const endShape = document.getElementById("lightning");
gsap.to("#diamond", { morphSVG: endShape });

// raw path data (string)
gsap.to("#diamond", { morphSVG: "M47.1,0.8 73.3,0.8 61.9,37.2 77.1,37.2 30.7,99.4 45.8,51.9 29,51.9z" });

// points for polygon or polyline elements:
gsap.to("#polygon", { morphSVG: "240,220 240,70 70,70 70,220" });
```

--------------------------------

### HTML: Component markup example

Source: https://gsap.com/docs/v3/GSAP/UtilityMethods/selector%28%29

Shows the HTML structure of a component with multiple .box elements, used to illustrate the scoping problem.

```html
<div class="my-component">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
```

--------------------------------

### Get Draggable instance with Draggable.get()

Source: https://gsap.com/docs/v3/Plugins/Draggable/static.get%28%29

Retrieves the Draggable instance associated with a DOM element using a selector string. The comment indicates that the element itself can be passed instead of a selector string, but the example is truncated in the source.

```javascript
var draggable = Draggable.get("#element1"); //or use the element itself instead of a selector string: var myElement =
```

--------------------------------

### Observer.create() with target, type, and callbacks

Source: https://gsap.com/docs/v3/Plugins/Observer/static.create%28%29

Creates an Observer instance with a target of window, listening for wheel and touch events, and defining onUp and onDown callbacks. All configuration properties are optional.

```javascript
Observer.create({
  target: window, // can be any element (selector text is fine)
  type: "wheel,touch", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
  onUp: () => previous(),
  onDown: () => next(),
});
```

--------------------------------

### getScrollPosition helper for ScrollTrigger animations

Source: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition

Use this helper to get the scroll position where a ScrollTriggered animation starts, ends, or any progress value (0 to 1). It requires the animation to have a ScrollTrigger and optionally accepts a progress value. It also supports the containerAnimation feature.

```javascript
function getScrollPosition(animation, progress) {
  let p = gsap.utils.clamp(0, 1, progress || 0),
    st = animation.scrollTrigger,
    containerAnimation = st.vars.containerAnimation;
  if (containerAnimation) {
    let time = st.start + (st.end - st.start) * p;
    st = containerAnimation.scrollTrigger;
    return (
      st.start + (st.end - st.start) * (time / containerAnimation.duration())
    );
  }
  return st.start + (st.end - st.start) * p;
}
```

--------------------------------

### gsap.utils.random() usage examples

Source: https://gsap.com/docs/v3/GSAP/UtilityMethods/random%28%29

Shows the three main usages of gsap.utils.random(): direct range, range with snapping, and a reusable function with snapping. The reusable function is created with returnFunction set to true and can be called repeatedly to get a new random value from the original range.

```javascript
// get a random number between -100 and 100 (no snapping)
gsap.utils.random(-100, 100);

// a random number between 0 and 500 that's snapped to the closest increment of 5
gsap.utils.random(0, 500, 5);

// get a reusable function that will randomly choose a value between -200 and 500, snapping to an increment of 10
var random = gsap.utils.random(-200, 500, 10, true);

// now we can call it anytime:
console.log(random()); // random value between -200 and 500, snapping to the closest 10
console.log(random()); // another random value between -200 and 500, snapping to the closest 10
```

--------------------------------

### Observer Configuration Options

Source: https://gsap.com/docs/v3/Plugins/Observer

Configuration options for creating an Observer instance, including callbacks for movement, press/release, and wheel/scroll events, along with sensitivity and target settings.

```APIDOC
## Observer Configuration Options

### Description
These are the configuration options you can pass to the Observer plugin to define its behavior and callbacks.

### Properties

#### axis
- **type**: Function
- **description**: Function to call when the pointer/mouse moves off the target ("pointerleave"/"mouseleave" event).

#### onMove
- **type**: Function
- **description**: Function to call when the user moves the pointer/mouse while hovered over the target element (only applies to "pointer" types). It listens for "pointermove"/"mousemove" events internally. Use `onDrag` if you want it to fire only while pressing and dragging. Note that when you define an onMove, it causes the Observer to measure delta values **while hovering** over the target, consequently triggering the appropriate movement-related callbacks like onUp, onDown, onChange, etc. for any pointer/mouse movement while over the target. Normally the movement-related callbacks are only triggered when the user **presses and drags**.

#### onPress
- **type**: Function
- **description**: Function to call when the user presses down on the target element (only applies to "touch" and/or "pointer" types).

#### onRelease
- **type**: Function
- **description**: Function to call when the touch/pointer is released after the `onPress` was called (only applies to "touch" and/or "pointer" types).

#### onRight
- **type**: Function
- **description**: Function to call when motion is detected toward the right direction.

#### onStop
- **type**: Function
- **description**: Function to call when changes have ceased for at least 0.25 seconds (configurable with `onStopDelay`).

#### onStopDelay
- **type**: Number
- **description**: Number of seconds to wait after changes have ceased firing before the `onStop` gets called (default: 0.25 seconds).

#### onToggleX
- **type**: Function
- **description**: Function to call when motion **switches direction** on the x-axis (horizontally).

#### onToggleY
- **type**: Function
- **description**: Function to call when motion **switches direction** on the y-axis (vertically).

#### onUp
- **type**: Function
- **description**: Function to call when upward motion is detected, meaning the delta values decrease (like dragging your finger/mouse UPWARD...which makes the `y` coordinate decrease). If you want to invert only the mouse wheel delta, you can set `wheelSpeed: -1` because it's a multiplier.

#### onWheel
- **type**: Function
- **description**: Function to call when the mouse wheel is used.

#### scrollSpeed
- **type**: Number
- **description**: A multiplier for scroll delta values. This only applies to type `"scroll"`, meaning when the target dispatches a scroll event which is different than a wheel event. You could set `scrollSpeed: -1` to invert the delta values and have it call `onUp` instead of `onDown` (and vice versa). `scrollSpeed: 0.5` would make the delta values *half* of what they'd normally be. *Note: there's also a separate `wheelSpeed` option that only applies to wheel events.*

#### target
- **type**: Element | String
- **description**: The element whose events should be listened for. By default, it's the main viewport.

#### tolerance
- **type**: Number
- **description**: The minimum distance (in pixels) necessary to trigger one of the callbacks like `onUp`, `onDown`, `onChangeY`, etc. So, for example, if the tolerance is 10 but the user only moves 8 pixels, no callback will be fired. Once the distance exceeds the tolerance amount, it fires the callbacks and resets, waiting for that distance to be exceeded again before firing the callback(s).

#### type
- **type**: String
- **description**: A comma-delimited list of the types of actions you'd like to listen for which can include any (or all) of the following: `"wheel,touch,scroll,pointer"`. "touch" works on any touch devices regardless of browser (iOS/Android may use TouchEvents under the hood whereas Microsoft may use PointerEvents but Observer includes them both in "touch"). "pointer" covers any non-touch pointer/mouse press/drag/swipe movements. "wheel" is for mouse wheel movements, and "scroll" is for scroll events. *Default is* `"wheel,touch,pointer"`.

#### wheelSpeed
- **type**: Number
- **description**: A multiplier for wheel delta values. By default, it merely passes along the wheel event's delta that the browser reports but perhaps it seems faster/slower than when you press/drag with the pointer and you need a way to make them more similar. To make the wheel delta values half of what they normally are, for example, you'd do `wheelSpeed: 0.5`. You could set `wheelSpeed: -1` to invert the delta values and have it call `onUp` instead of `onDown` (and vice versa). *Note: there's also a separate `scrollSpeed` option that only applies to scroll events.*
```

--------------------------------

### InertiaPlugin.untrack() usage examples

Source: https://gsap.com/docs/v3/Plugins/InertiaPlugin/VelocityTracker/.untrack%28%29

Shows how to use InertiaPlugin.untrack() to stop tracking velocity for specific properties or all properties of an object. The first line demonstrates starting tracking with track(), and the subsequent lines show untrack() with a single property, a comma-separated list, and no property to stop tracking all.

```javascript
//starts tracking "x" and "y":
InertiaPlugin.track(obj, "x,y");

//stops tracking only the "x" property:
InertiaPlugin.untrack(obj, "x");

//stops tracking "x" and "y":
InertiaPlugin.untrack(obj, "x,y");

//stops tracking all properties of obj:
InertiaPlugin.untrack(obj);
```

--------------------------------

### Create GSDevTools instance

Source: https://gsap.com/docs/v3/Plugins/GSDevTools

Creates a GSDevTools instance with default settings, giving control over every animation on the global timeline.

```javascript
GSDevTools.create();
```
Tokens:
Raw