### GSAP RoughEase - Quick Start

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

Basic setup and minimal usage of RoughEase with GSAP.

```APIDOC
## GSAP RoughEase - Quick Start

### CDN Link

Copy the following CDN link to include EasePack in your project:

```javascript
gsap.registerPlugin(EasePack)
```

### Minimal Usage

An example of animating the scale of an element using RoughEase with default configuration:

```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)" });
```

**Note:** RoughEase is part of the EasePack file and is not included in the GSAP Core. Refer to the [Installation page](/docs/v3/Installation) for instructions on including it in your project.
```

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

### RoughEase Examples

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

Examples demonstrating how to use RoughEase with default and customized configurations.

```APIDOC
## RoughEase Examples

### Example 1: Default Configuration

Use the default values for RoughEase:

```javascript
gsap.from(element, {duration: 1, opacity: 0, ease: "rough"});
```

### Example 2: Customized Configuration

Customize the configuration properties for RoughEase:

```javascript
gsap.to(element, {duration: 2, y: 300, ease: "rough({strength: 3, points: 50, template: strong.inOut, taper: both, randomize: false})" });
```
```

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

### Basic useGSAP Hook Setup

Source: https://gsap.com/resources/react-advanced

Demonstrates the basic setup for the useGSAP hook in a React component. Animations created within the hook are automatically reverted.

```javascript
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

const container = useRef();

useGSAP(() => {
  // gsap code here...
  gsap.to(".el", {rotation: 180}); // <-- automatically reverted

}, { scope: container }) // <-- scope for selector text (optional)
```

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

### Time Scale Example

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

Example of how to get and set the global timeline's time scale.

```APIDOC
## Setting and Getting Time Scale

### Description
Demonstrates how to adjust the playback speed of all GSAP animations using the global timeline's `timeScale()` method.

### Method
`gsap.globalTimeline.timeScale()`

### Endpoint
N/A (JavaScript method)

### Parameters
#### Query Parameters
- `value` (number) - Optional - The new time scale multiplier. If omitted, the current time scale is returned.

### Request Example
```javascript
// Set global time scale to half speed
gsap.globalTimeline.timeScale(0.5);

// Set global time scale to double speed
gsap.globalTimeline.timeScale(2);

// Get the current global time scale
var currentScale = gsap.globalTimeline.timeScale();
console.log(currentScale);
```

### Response
#### Success Response (200)
- `timeScale` (number) - The current global time scale multiplier.
```

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

### Comprehensive CustomWiggle Examples

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

Examples showing registration, creation of different wiggle types, and shorthand string ease formats.

```javascript
gsap.registerPlugin(CustomEase, CustomWiggle); // register

//Create a wiggle with 6 oscillations (default type:"easeOut")
CustomWiggle.create("myWiggle", {wiggles: 6});

//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.
gsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});

//Create a 10-wiggle anticipation ease:
CustomWiggle.create("funWiggle", {wiggles: 10, type: "anticipate"});
gsap.to(".class", {duration: 2, rotation: 30, ease: "funWiggle"});

//Alternatively, make sure CustomWiggle is loaded and use GSAP's string ease format
ease: "wiggle(15)" //<-- easy!
ease: "wiggle({type:anticipate, wiggles:8})" //advanced
```

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

### Physics2DPlugin - Usage Examples

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

Illustrative examples of how to implement various physics effects using the Physics2DPlugin.

```APIDOC
## Physics2DPlugin Usage Examples

### Basic Usage with Gravity

```javascript
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, gravity: 400 },
});
```

### Usage with Friction

```javascript
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, friction: 0.1 },
});
```

### Usage with Acceleration and Acceleration Angle

```javascript
gsap.to(element, {
  duration: 2,
  physics2D: {
    velocity: 300,
    angle: -60,
    acceleration: 50,
    accelerationAngle: 180,
  },
});
```
```

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

### RoughEase Implementation

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

Examples showing default usage and customized configuration for RoughEase.

```javascript
//use the default values
gsap.from(element, {duration: 1, opacity: 0, ease: "rough"});

//or customize the configuration
gsap.to(element, {duration: 2, y: 300, ease: "rough({strength: 3, points: 50, template: strong.inOut, taper: both, randomize: false})" });
```

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

### Initialize useGSAP Hook

Source: https://gsap.com/resources/react-basics

Basic setup for the useGSAP hook, including registration and scope configuration.

```javascript
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

const container = useRef();

useGSAP(() => {
  // gsap code here...
  gsap.to(".el", {rotation: 180}); // <-- automatically reverted

}, { scope: container }) // <-- scope for selector text (optional)
```

```javascript
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

const container = useRef();

useGSAP(() => {
  // gsap code here...
  gsap.to(".box", {x: 100}); // <-- automatically reverted

}, { scope: container }); // <-- easily add a scope for selector text (optional)
```

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

### Initialize React project with GSAP

Source: https://gsap.com/resources/React

Commands to create a new React application and install the necessary GSAP dependencies.

```bash
npx create-react-app gsap-app
cd gsap-app
npm start
```

```bash
# Install the GSAP library
npm install gsap

# Install the GSAP React package
npm install @gsap/react

# Start the project
npm start
```

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

### Install GSAP React package

Source: https://gsap.com/resources/React

Command to install the official GSAP React integration package.

```bash
npm install @gsap/react
```

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

### Install GSAP

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

Command to install the GSAP package via npm.

```bash
npm install gsap
```

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

### Configure linked properties

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

Example of linking properties for coordinate-based snapping.

```javascript
linkedProps: "x,y"
```

```javascript
return {x: 200, y: 300}
```

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

### Configure InertiaPlugin properties

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

Examples of setting min and max bounds for properties like x.

```javascript
{x: {velocity: -500, min: 0}}
```

```javascript
{x: {velocity: 500, max: 1024}}
```

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

### Physics2DPlugin - Quick Start

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

This snippet shows how to register and use the Physics2DPlugin for basic physics-based tweens.

```APIDOC
## GSAP Physics2DPlugin Quick Start

### CDN Link

```javascript
gsap.registerPlugin(Physics2DPlugin)
```

### Minimal Usage

This example demonstrates a basic tween with physics properties.

```javascript
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, gravity: 400 },
});
```
```

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

### Timeline Sequencing

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

Examples of creating a timeline, adding tweens, and using method chaining for sequencing.

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

```javascript
tl.to(".box", { duration: 2, x: 100, opacity: 0.5 });
```

```javascript
//sequenced one-after-the-other
tl.to(".box1", { duration: 2, x: 100 }) //notice that there's no semicolon!
  .to(".box2", { duration: 1, y: 200 })
  .to(".box3", { duration: 3, rotation: 360 });
```

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

### Basic MotionPath Animation Example

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

A demonstration of animating an element along an SVG path using the MotionPathPlugin.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of a new user in the system.

### Method
POST

### Endpoint
/api/users

### Parameters

#### Request Body
- **username** (string) - Required - The desired username for the new account.
- **email** (string) - Required - The email address for the new account.
- **password** (string) - Required - The password for the new account.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

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

### Physics2D Usage Variations

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

Examples demonstrating different configurations including friction and custom acceleration angles.

```javascript
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, gravity: 400 },
});
//or
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, friction: 0.1 },
});
//or
gsap.to(element, {
  duration: 2,
  physics2D: {
    velocity: 300,
    angle: -60,
    acceleration: 50,
    accelerationAngle: 180,
  },
});
```

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

### Apply ExpoScale Ease

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

Example of using the expoScale ease to animate an element's scale.

```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)" });
```

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

### Configure ExpoScaleEase Animation

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

Examples of applying ExpoScaleEase to GSAP tweens with varying configurations.

```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)" });
```

```javascript
//scale from 0.5 to 3 using "power2.inOut" ...
gsap.fromTo(
  "#image",
  { scale: 0.5 },
  { duration: 1, scale: 3, ease: "expoScale(0.5, 3, power2.inOut)" }
);
```

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

### Horizontal Loop Usage

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

Example of initializing the loop and binding click events to navigation methods.

```javascript
const boxes = gsap.utils.toArray(".box"),
  loop = horizontalLoop(boxes, { paused: true });

// add click listeners so you can click a box to have it move to the first slot
boxes.forEach((box, i) =>
  box.addEventListener("click", () =>
    loop.toIndex(i, { duration: 1, ease: "power1.inOut" })
  )
);

// make the "next" and "previous" buttons call the appropriate methods on the timeline
document
  .querySelector(".next")
  .addEventListener("click", () =>
    loop.next({ duration: 1, ease: "power1.inOut" })
  );
document
  .querySelector(".prev")
  .addEventListener("click", () =>
    loop.previous({ duration: 1, ease: "power1.inOut" })
  );
```

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

### GSAP Timeline - restart()

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

Restarts the timeline, beginning playback from the start.

```APIDOC
## restart()

### Description
Restarts and begins playing forward from the beginning.

### Method
POST

### Endpoint
/llmstxt/gsap_llms_txt

### Parameters
#### Query Parameters
- **includeDelay** (Boolean) - Optional - Whether to include any delay before the first iteration.
- **suppressEvents** (Boolean) - Optional - If true, suppresses events from firing.

### Response
#### Success Response (200)
- **self** (Timeline) - The timeline instance.
```

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

### Advanced ScrambleText Configuration

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

Examples showing both default usage and a customized configuration object for specific animation behaviors.

```javascript
//use the defaults
gsap.to(element, {duration: 1, scrambleText: "THIS IS NEW TEXT"});//or customize things:

gsap.to(element, {
  duration: 1, 
  scrambleText: {
    text: "THIS IS NEW TEXT", 
    chars: "XO", 
    revealDelay: 0.5, 
    speed: 0.3, 
    newClass: "myClass"
  }
});
```

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

### Create a basic GSAP tween

Source: https://gsap.com/resources/get-started

A simple example of animating an element with the class 'box' to an x-axis position of 200px.

```javascript
gsap.to(".box", { x: 200 })
```

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

### GET Draggable.startY

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

Retrieves the starting vertical position of the Draggable instance when the most recent drag began.

```APIDOC
## GET Draggable.startY

### Description
Returns the starting `y` (vertical) position of the Draggable instance when the most recent drag began. This is a read-only property.

### Details
For a Draggable of `type: "x,y"`, it represents the `y` transform translation (e.g., `transform: translateY(...)`). For `type: "top,left"`, it refers to the CSS `top` value applied to the element. Note that this is the inline CSS-related value, not the global coordinate.

### Type
Number (read-only)
```

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

### Stagger Animations with Multiple Refs

Source: https://gsap.com/resources/react-basics

Example demonstrating the repetitive nature of creating individual refs for multiple elements.

```javascript
// So many refs...
const container = useRef();
const box1 = useRef();
const box2 = useRef();
const box3 = useRef();

// ...just to do a simple stagger
useGSAP(() => {
  gsap.from([box1, box2, box3], {opacity: 0, stagger: 0.1});
});

return (
  <div ref={container}>
      <div ref={box1} className="box"></div>
      <div ref={box2} className="box"></div>
      <div ref={box3} className="box"></div>
  </div>
);
```

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

### GSAP onReverseCompleteParams Example

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

Define parameters for the `onReverseComplete` callback in GSAP timelines. This callback executes when an animation reverses to its starting point.

```javascript
gsap.timeline({onReverseComplete: myFunction, onReverseCompleteParams: ["param1", "param2"]});
```

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

### Animating from Center Outward

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

Animate a stroke outward from the center of an SVG path. This example starts with a gap at 50% and animates to fill the entire path.

```javascript
gsap.fromTo("#path", {drawSVG: "50% 50%"}, {duration: 1, drawSVG: "0% 100%"});
```

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

### Basic EaselJS Setup and Tweening

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

Sets up an EaselJS stage and a shape, then tweens its tint and scale using GSAP. Remember to cache the shape for filters to work.

```javascript
var canvas = document.getElementById("myCanvas"),
  stage = new createjs.Stage(canvas),
  circle = new createjs.Shape(),
  g = circle.graphics;

g.beginFill(createjs.Graphics.getRGB(255, 0, 0));
g.drawCircle(0, 0, 100);
g.endFill();

circle.cache(-100, -100, 200, 200);

circle.x = 200;
circle.y = 200;

stage.addChild(circle);

gsap.ticker.add(() => stage.update());
stage.update();

gsap.to(circle, {
  duration: 2,
  scaleX: 0.5,
  scaleY: 0.5,
  easel: { tint: 0x00ff00 },
});
```

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

### Minimal ScrollTrigger Animation

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

A basic example demonstrating how to animate an element when it enters the viewport using ScrollTrigger. The animation starts when the target element becomes visible.

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

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

### Staggered DrawSVG Animations

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

Animate multiple SVG elements with staggered start times using the stagger property. This example staggers animations 0.1 seconds apart.

```javascript
//draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
gsap.from('.draw-me', { duration: 1, stagger: 0.1, drawSVG: 0 });
```

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

### GSAP MotionPath Tween Example

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

Animates an element along a defined motion path using GSAP. Ensure the target element and path are correctly selected. Alignment is calculated once at the start and is not responsive to resizing.

```javascript
gsap.to("#div", {
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5],
    autoRotate: true,
  },
  transformOrigin: "50% 50%",
  duration: 5,
  ease: "power1.inOut",
});
```

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

### Create GSDevTools Instance

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

Initialize GSDevTools by passing a configuration object to the create method.

```javascript
GSDevTools.create({ animation: yourAnimation... });
```

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

### Insert Tween at Start of Previous Animation

Source: https://gsap.com/resources/position-parameter

Use '<' to align the start of the current tween with the start of the immediately preceding animation.

```javascript
tl.to(".class", {x: 100}, "<");
```

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

### Initialize GSDevTools

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

Create a GSDevTools instance to enable the visual debugging UI.

```javascript
GSDevTools.create();
```

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

### Configure Easing with Inputs

Source: https://gsap.com/resources/3-migration

Demonstrates how to pass configuration parameters to easing functions using parentheses.

```javascript
// old
ease: Elastic.easeOut.config(1, 0.3)
ease: Elastic.easeIn.config(1, 0.3)

// new
ease: "elastic(1, 0.3)"  // the default is .out
ease: "elastic.in(1, 0.3)"
```

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

### SVG path element example

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

An example of an SVG path element with two segments.

```xml
<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" />
```

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

### Configuring useGSAP with Dependencies and Scope

Source: https://gsap.com/resources/React

Demonstrates various ways to configure the useGSAP hook, including using a config object for advanced settings or a simple dependency array.

```javascript
useGSAP(() => {
		// gsap code here...
},{ dependencies: [endX], scope: container, revertOnUpdate: true });

useGSAP(() => {
	// gsap code here...
}, [endX]); // simple dependency array setup like useEffect, good for state-reactive animation

useGSAP(() => {
	// gsap code here...
}); // defaults to an empty dependency array '[]' and no scoping.
```

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

### Create Custom Ease from Cubic-Bezier String

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

Shows how to create a CustomEase using a standard cubic-bezier string, which can be obtained from tools like cubic-bezier.com.

```javascript
CustomEase.create("easeName", ".17,.67,.83,.67");
```

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

### Start Animation at 30% Along Path

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

Begin the animation at a specific point along the motion path by setting the 'start' property to a decimal value between 0 and 1. `start: 0.3` initiates the animation at the 30% mark.

```javascript
start: 0.3
```

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

### Usage Example for Progressive Timeline

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

Demonstrates how to use the `progressiveBuild` function to create a timeline with three steps and a 1.5-second delay between the second and third steps. Assumes `step1`, `step2`, and `step3` are defined functions.

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

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

### ScrollTrigger start Property

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

Details regarding the read-only start property which indicates the scroll position in pixels.

```APIDOC
## Property: start

### Description
[read-only] The ScrollTrigger's starting scroll position (numeric, in pixels). This value is calculated when the ScrollTrigger is refreshed, such as during window or scroller resizing.

### Details
The start property is always numeric and reflects the scroll position in pixels. For example, if a trigger element is 100px below the viewport and the start configuration is set to "top bottom", the calculated start property will be 100.
```

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

### GSAP onStartParams Example

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

Specify parameters for the `onStart` callback function in GSAP timelines. This callback is triggered when the animation begins its playback.

```javascript
gsap.timeline({onStart: myFunction, onStartParams: ["param1", "param2"]});
```

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

### Uninstall Club GSAP and install public package

Source: https://gsap.com/resources/private-repo-migration

Commands to remove the private dependency and install the public GSAP package.

```bash
npm uninstall @gsap/business
```

```bash
npm install gsap
```

```bash
yarn remove @gsap/business
```

```bash
yarn add gsap
```

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

### Combine Bounce and Squash/Stretch

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

This example demonstrates the complete implementation: registering plugins, creating a custom bounce ease with squash, and applying both the bounce to 'y' and the squash to scale properties in separate, synchronized tweens.

```javascript
gsap.registerPlugin(CustomEase, CustomBounce); // register

//Create a custom bounce ease:
CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

//do the bounce by affecting the "y" property.
gsap.from(".class", { duration: 2, y: -200, ease: "myBounce" });

//and do the squash/stretch at the same time:
gsap.to(".class", {
  duration: 2,
  scaleX: 1.4,
  scaleY: 0.6,
  ease: "myBounce-squash",
  transformOrigin: "center bottom",
});
```

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

### GSDevTools Methods

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

Information about the static `create` method for initializing GSDevTools.

```APIDOC
## Methods

#### GSDevTools.create( config:Object ) : GSDevTools

Initializes a new GSDevTools instance with the provided configuration object.
```

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

### Shorthand Relative Positioning to Previous Animation Start

Source: https://gsap.com/resources/position-parameter

A number following '<' implies an offset relative to the start of the previous animation, equivalent to '<+='.

```javascript
tl.to(".class", {x: 100}, "<3");
```

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

### GSAP Tween with Complex Ease Configuration

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

Demonstrates applying various GSAP eases, including custom ones, within a single tween configuration. This example shows how to use different ease types and parameters.

```javascript
gsap.to(target, {
  duration:2.5,
  ease: "Cubic/power2 (power2).out",none",
  // ... other ease configurations like strength, points, taper, randomize, clamp
  // ... custom ease creation examples like create("custom", ""), create("myWiggle", { wiggles:10, type:easeInOut })
  // ... custom bounce ease creation example
  y: -500,
  rotation: 360,
  x: "400%"
});
```

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

### Initialize PixiPlugin with PIXI

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

Import and register the plugin with a reference to the PIXI object.

```javascript
import * as PIXI from "pixi.js";
import { gsap } from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin";

// register the plugin
gsap.registerPlugin(PixiPlugin);

// give the plugin a reference to the PIXI object
PixiPlugin.registerPIXI(PIXI);
```

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

### Relative Positioning to Previous Animation Start with Offset

Source: https://gsap.com/resources/position-parameter

Use '<+=' to position the tween relative to the start of the previous animation, with an added offset.

```javascript
tl.to(".class", {x: 100}, "<+=3");
```

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

### GSDevTools Tips and Tricks

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

Helpful tips for using GSDevTools effectively.

```APIDOC
## Tips and tricks

* It is almost always best to define an animation directly like `GSDevTools.create({ animation: yourAnimation... });` so that it doesn't need to worry about merging all the global animations in.

* Clicking the GSAP logo (bottom right) gets you right to the [docs](/docs/v3/.md)!

* Double-click on the in/out marker(s) to reset them both immediately.

* If the playback UI is obscuring part of your animation, just tap the "H" key to hide it (and again to bring it back) - you can still use all the keyboard shortcuts even when it's invisible.
```

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

### Simple ScrollTrigger Example

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

This example illustrates a straightforward use of ScrollTrigger to animate an element. The animation is triggered once the specified element scrolls into view.

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

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

### Prevent Scrub Animation Jump on Load with Clamp

Source: https://gsap.com/resources/st-mistakes

To prevent scrub animations from jumping on initial load when the start value is before the initial scroll position, adjust the `start` value or use the `clamp()` feature. `clamp()` ensures the animation's start is constrained to the initial scroll position.

```javascript
ScrollTrigger.create({
  trigger: ".my-element",
  start: "clamp(top bottom)", // Constrains start to be at or after the initial scroll position
  end: "bottom top",
  scrub: true
});

```

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

### Flip.from() Configuration Options

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

Configuration parameters for the Flip.from() method to control animation behavior, performance, and element properties.

```APIDOC
## Flip.from() Configuration

### Description
Configuration options for the Flip.from() method to customize the animation of elements between states.

### Parameters
#### Request Body
- **props** (String) - Optional - Comma-delimited list of camelCased CSS properties to include in the animation.
- **prune** (Boolean) - Optional - If true, removes targets that match the previous state to conserve resources.
- **scale** (Boolean) - Optional - If true, uses CSS scale instead of width/height for size changes.
- **simple** (Boolean) - Optional - If true, skips complex rotation/scale/skew calculations for better performance.
- **spin** (Boolean | Number | Function) - Optional - Controls element rotation during the flip. Can be a boolean, number of rotations, or a function returning a value per target.
- **targets** (String | Element | Array | NodeList) - Optional - Defines a subset of targets to animate from the state object.
- **toggleClass** (String) - Optional - CSS class to add to targets during the animation.
- **zIndex** (Number) - Optional - Sets the z-index during the animation, reverting at the end.
```

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

### CSS Transform Example (Not Supported in IE)

Source: https://gsap.com/resources/svg

This CSS example demonstrates setting transforms, but it is noted that Internet Explorer does not support CSS transforms on SVG elements.

```css
#gear {
  /* won't work in IE */
  transform: translateX(100px) scale(0.5);
}
```

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

### Compare Plugin Usage

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

Comparison between manual PixiJS property animation and using PixiPlugin.

```javascript
//old way (without plugin):
gsap.to(pixiObject.scale, { x: 2, y: 1.5, duration: 1 });
gsap.to(pixiObject.skew, { x: (30 * Math.PI) / 180, duration: 1 });
gsap.to(pixiObject, { rotation: (60 * Math.PI) / 180, duration: 1 });

//new way (with plugin):
gsap.to(pixiObject, {
  pixi: { scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60 },
  duration: 1,
});
```

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

### Percentage-Based Positioning Relative to Previous Animation Start with Offset

Source: https://gsap.com/resources/position-parameter

Use '<+=' with a percentage to position the tween relative to the start of the previous animation, based on the inserting animation's duration.

```javascript
tl.to(".class", {x: 100}, "<+=25%");
```

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

### useGSAP Hook Configuration

Source: https://gsap.com/resources/React

Demonstrates the different ways to use the useGSAP hook, including with a config object, a simple dependency array, and default settings.

```APIDOC
## useGSAP Hook Configuration Examples

### Description

The `useGSAP` hook can be used with a configuration object for greater flexibility, a simple dependency array similar to `useEffect`, or with default settings.

### Code Examples

```javascript
// Using a config object for maximum flexibility
useGSAP(() => {
	// gsap code here...
}, {
	dependencies: [endX],
	scope: container,
	revertOnUpdate: true
});

// Simple dependency array setup like useEffect
useGSAP(() => {
	// gsap code here...
}, [endX]);

// Defaults to an empty dependency array and no scoping
useGSAP(() => {
	// gsap code here...
});
```
```

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

### Animating a Segmented Path

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

Example demonstrating how to animate a specific segment of an SVG path using GSAP's DrawSVGPlugin. This example animates from 20% to 80% of the path's length.

```javascript
gsap.to("#path", {duration: 1, drawSVG: "20% 80%"});
```

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

### paused()

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

Gets or sets the animation's paused state.

```APIDOC
## paused()

### Description
Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.

### Method
Getter/Setter

### Endpoint
N/A (Method on an object instance)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **value** (Boolean) - Required - The paused state to set (true to pause, false to resume).

### Response
#### Success Response (200)
- **Boolean | self** - The current paused state or the timeline instance if setting the value.
```

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

### Usage Example for Image Sequence Function

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

Demonstrates how to call the `imageSequence` helper function with an array of image URLs, a canvas selector, and ScrollTrigger configuration. Ensure `scrub: true` is set in the ScrollTrigger configuration for the desired effect.

```javascript
imageSequence({
  urls,
  canvas: "#image-sequence",
  scrollTrigger: {
    start: 0,
    end: "max",
    scrub: true
  }
});
```

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

### iteration()

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

Gets or sets the current repeat (iteration) of timelines.

```APIDOC
## iteration()

### Description
Gets or sets the iteration (the current repeat) of timelines.

### Method
Getter/Setter

### Endpoint
N/A (Method on an object instance)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **value** (Number) - Required - The iteration number to set.

### Request Example
```json
{
  "value": 3
}
```

### Response
#### Success Response (200)
- **Number | self** - The current iteration number or the timeline instance if setting the value.
```

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

### Implement SlowMo Ease

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

Demonstrates default usage, custom configuration, and yoyoMode for synchronized opacity tweens.

```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)"});
```

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

### GET /velocitytracker/target

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

Retrieves the target object associated with the VelocityTracker.

```APIDOC
## GET /velocitytracker/target

### Description
Returns the target object with which the VelocityTracker is associated.

### Method
GET

### Endpoint
/velocitytracker/target

### Returns
#### Success Response (200)
- **target** (Object) - The target object associated with the VelocityTracker.

#### Response Example
{
  "target": {
    "example_property": "example_value"
  }
}
```

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

### Import GSDevTools

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

Include GSDevTools via CDN or module import.

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/GSDevTools.min.js"></script>
```

```javascript
import { GSDevTools } from "gsap/GSDevTools";
```

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

### Create and Visualize CustomEase

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

Use `CustomEase.create()` to define a custom ease and `getSVGData()` to generate SVG path data for visualization. The `path` property in the options object can target an SVG element by its ID.

```javascript
CustomEase.create(
  "hop",
  "M0,0 C0,0 0.056,0.445 0.175,0.445 0.294,0.445 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

CustomEase.getSVGData("hop", { width: 500, height: 400, path: "#ease" });
```

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

### Register MotionPathPlugin

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

Register the MotionPathPlugin before using its features. This is a one-time setup.

```javascript
gsap.registerPlugin(MotionPathPlugin)
```

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

### GET .trigger

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

Retrieves the trigger element associated with a ScrollTrigger instance.

```APIDOC
## .trigger

### Description
Returns the trigger element defined for the ScrollTrigger instance. If a selector string was provided during initialization, this property returns the actual DOM element.

### Returns
- **Element | undefined** - The trigger element if defined.

### Details
This property is read-only. Note that a ScrollTrigger can exist without a trigger element if the start and end positions are defined as absolute scroll values (numbers).

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

console.log(st.trigger); // Returns the DOM element
```
```

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

### Initialize LottieScrollTrigger

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

Example usage of the LottieScrollTrigger function, passing configuration options for the target element, animation path, and scroll behavior.

```javascript
LottieScrollTrigger({
  target: "#animationWindow",
  path: "https://assets.codepen.io/35984/tapered_hello.json",
  speed: "medium",
  scrub: 2, // seconds it takes for the playhead to "catch up"
  // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See /docs/v3/Plugins/ScrollTrigger
});
```

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

### Set duration range

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

Example of defining a duration range for the inertia tween.

```javascript
duration:{min:0.5, max:3}
```

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

### GSAP Timeline - repeatDelay()

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

Gets or sets the delay in seconds between repetitions of the timeline.

```APIDOC
## repeatDelay()

### Description
Gets or sets the amount of time in seconds between repeats.

### Method
GET/PUT

### Endpoint
/llmstxt/gsap_llms_txt

### Parameters
#### Query Parameters
- **value** (Number) - Optional - The delay in seconds between repeats.

### Response
#### Success Response (200)
- **delay** (Number) - The repeat delay in seconds (if getting).
- **self** (Timeline) - The timeline instance (if setting).
```

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

### GET .pin Property

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

Access the pinned element associated with a ScrollTrigger instance.

```APIDOC
## .pin

### Description
Returns the element that is being pinned by the ScrollTrigger instance. If a selector string was provided during configuration, this property returns the actual DOM element.

### Type
Element | undefined

### Access
Read-only

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

console.log(st.pin); // Returns the DOM element associated with ".pin"
```
```

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

### Inertia Plugin with Live Snap Points

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

Configure live snapping to a set of points. The element will snap to the nearest point within a specified radius.

```javascript
liveSnap: {points: [{x: 0, y: 0},{x: 100, y: 0}], radius: 20}
```

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

### Draggable.zIndex Property

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

Configures the starting z-index value applied to elements when they are pressed or touched.

```APIDOC
## Static Property: Draggable.zIndex

### Description
The starting zIndex that gets applied by default when an element is pressed or touched. This value is incremented for each new element interacted with to ensure the stacking order remains correct (newly pressed objects rise to the top).

### Type
Number

### Default Value
1000

### Usage
```javascript
Draggable.zIndex = 500;
```

### Notes
- This applies to positional types like "x,y" or "top,left".
- It does not apply to "rotation" or "scroll" types.
- Behavior can be disabled by setting `zIndexBoost: false` in the Draggable instance's `vars` parameter.
```