### Playing animations with play()

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

Examples of starting playback from the current position, a specific time, and controlling event suppression.

```javascript
//begins playing from wherever the playhead currently is:
tl.play();

//begins playing from exactly 2-seconds into the animation:
tl.play(2);

//begins playing from exactly 2-seconds into the animation but doesn't suppress events during the initial move:
tl.play(2, false);
```

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

### Basic Flip Animation Setup

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

A fundamental example of using Flip.from to animate changes. Ensure you have captured the initial state using Flip.getState() beforehand.

```javascript
let state = Flip.getState(".my-elements");

// ... perform some DOM changes ...

Flip.from(state, {
  // animation properties here
});
```

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

### GSAP Timeline Setup and getChildren Usage Example

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

Demonstrates setting up master and nested GSAP timelines, adding tweens, nesting the timelines, and then using getChildren with various parameters to inspect the children. Includes console logs to show the number of children returned.

```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)
```

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

### Get and set animation startTime

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

Demonstrates using the method as a getter to retrieve the current start time and as a setter to update it.

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

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

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

### Minimal Usage Example

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

Demonstrates basic implementation of an ease.

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

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

### Minimal EaselJS Tween Example

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

A basic example demonstrating tweening the scale and tint of an EaselJS circle.

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

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

### Full EaselJS Setup and Tweening

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

Complete setup for an EaselJS stage, shape, and circle, followed by multiple GSAP tweens including tint, scale, position, rotation, and saturation.

```javascript
//setup stage and create a Shape into which we'll draw a circle later...
var canvas = document.getElementById("myCanvas"),
  stage = new createjs.Stage(canvas),
  circle = new createjs.Shape(),
  g = circle.graphics;

//draw a red circle in the Shape
g.beginFill(createjs.Graphics.getRGB(255, 0, 0));
g.drawCircle(0, 0, 100);
g.endFill();

//in order for the ColorFilter to work, we must cache() the circle
circle.cache(-100, -100, 200, 200);

//place the circle at 200,200
circle.x = 200;
circle.y = 200;

//add the circle to the stage
stage.addChild(circle);

//setup a "tick" event listener so that the EaselJS stage gets updated on every frame/tick
gsap.ticker.add(() => stage.update());
stage.update();

//tween the tint of the circle to green and scale it to half-size
gsap.to(circle, {
  duration: 2,
  scaleX: 0.5,
  scaleY: 0.5,
  easel: { tint: 0x00ff00 },
});

//tween to a different tint that is only 50% (mixing with half of the original color) and animate the scale, position, and rotation simultaneously.
gsap.to(circle, {
  duration: 3,
  scaleX: 1.5,
  scaleY: 0.8,
  x: 250,
  y: 150,
  rotation: 180,
  easel: { tint: "#0000FF", tintAmount: 0.5 },
  delay: 3,
  ease: "elastic",
});

//then animate the saturation down to 0
gsap.to(circle, { duration: 2, easel: { saturation: 0 }, delay: 6 });
```

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

### Minimal Flip Animation Example

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

A basic example demonstrating the core Flip animation process: capturing the initial state, making DOM changes, and then animating to the new state.

```javascript
// grab state
const state = Flip.getState(squares);
  
// Make DOM or styling changes
switchItUp();
  
// Animate from the initial state to the end state
Flip.from(state, {"duration": 2, "ease": "power1.inOut"});
```

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

### Usage Example for getScrollLookup (JavaScript)

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

Demonstrates how to initialize the `getScrollLookup` function with a container animation and start position, and then use the returned function to animate the scroll position to a specific element.

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

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

### Estimate Progress for Value Hit

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

This example demonstrates how to use `easeToLinear` to find the progress point where a value within a tween's range will be hit, given the start, end, and target values, and the ease.

```javascript
let from = 100,
  to = 500,
  targetValue = 250,
  progress = easeToLinear(
    "power2",
    (targetValue - from) / (to - from),
    0.00001
  );
```

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

### Configure trackDirection with options

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

Examples of using configuration objects to define onToggle and onUpdate callbacks.

```javascript
gsap.to(
  ...{
    x: 100,
    onUpdate: trackDirection({
      onToggle: (direction) => console.log("toggled direction to", direction),
      onUpdate: (direction) => console.log("updated animation"),
    }),
  }
);
```

```javascript
trackDirection({
  animation: tl,
  onToggle: (direction) => console.log("toggled direction to", direction),
  onUpdate: (direction) => console.log("updated animation"),
});
```

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

### Configure InertiaPlugin properties

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

Examples of setting min, max, and end values for inertia tweens.

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

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

```javascript
end: 100
```

```javascript
end: [0,100,200,300]
```

```javascript
end: function(n) { return Math.round(n / 10) * 10; }
```

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

### startTime Method

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

Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).

```APIDOC
## startTime

### Description
Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).

### Method
GET/SET

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

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Gets current start time
var start = tl.startTime();

// Sets start time to 2 seconds
tl.startTime(2);
```

### Response
#### Success Response (200)
- **Number** (getter): The current start time of the animation.
- **self** (setter): The animation instance itself, for chaining.

#### Response Example
```json
// Getter example response
2

// Setter example response (for chaining)
{
  "instance": "tl"
}
```

### Details
Gets or sets the time at which the animation begins on its parent timeline (after any `delay` that was defined). For example, if a tween starts at exactly 3 seconds into the timeline on which it is placed, the tween's `startTime` would be 3.

The `startTime` may be automatically adjusted to make the timing appear seamless if the parent timeline's `smoothChildTiming` property is `true` and a timing-dependent change is made on-the-fly, like `reverse()` is called or `timeScale()` is changed, etc. See the documentation for the [`smoothChildTiming`](/docs/v3/GSAP/Timeline/smoothChildTiming.md) property of timelines for more details.

This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.
```

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

### Import GSAP

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

Import the GSAP library into your JavaScript files after installation.

```javascript
import { gsap } from "gsap"

```

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

### Get All Children After Specific Time

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

Retrieves all children (tweens and timelines, including nested) that start after a specified time. The ignoreBeforeTime parameter filters children based on their start time.

```javascript
children = master.getChildren(true, true, true, 0.5);
```

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

### GET ScrollTrigger.start

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

Access the read-only start property to retrieve the calculated scroll position in pixels.

```APIDOC
## GET ScrollTrigger.start

### Description
Returns the ScrollTrigger's starting scroll position in pixels. This value is calculated automatically upon refresh or window/scroller resize.

### Parameters
- **start** (Number) - Read-only - The calculated scroll position in pixels where the trigger activates.

### Response
- **start** (Number) - The numeric scroll position in pixels.
```

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

### Get and Set GSAP Animation startTime

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

Use this method to retrieve the current start time of an animation or to set a new start time. Omitting the value acts as a getter, while providing a number sets the value and enables chaining.

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

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

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

### Weighted Ease Examples

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

Demonstrates how to apply directional weighting to standard GSAP eases using the `config` method after `addWeightedEases` has been run.

```javascript
ease: "power2.inOut(0.5)"
```

```javascript
ease: "power2.inOut(-0.2)"
```

```javascript
ease: "power2.inOut(-1)"
```

```javascript
ease: "power2.inOut(1)"
```

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

### Minimal ScrollTrigger Animation

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

A basic example to start an animation when a specific element enters the viewport. The animation target and the scroll trigger element can be the same.

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

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

### Create a Basic Observer Instance

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

Create an Observer instance to listen for 'wheel' and 'touch' events on the window. It triggers 'previous()' on 'onUp' and 'next()' on 'onDown'.

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

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

### Complete PixiPlugin Setup

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

Import necessary libraries and register PixiPlugin and PixiJS with GSAP for full functionality.

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

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

### Get Scroll Position with ScrollSmoother

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

Use this getter to retrieve the current scroll position in pixels. No setup is required beyond initializing ScrollSmoother.

```javascript
let scroll = smoother.scrollTop();
```

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

### Get the content element

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

Use this getter to retrieve the current content element managed by ScrollSmoother. No setup is required beyond initializing ScrollSmoother.

```javascript
let content = smoother.content();
```

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

### Create GSDevTools Instance

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

Create a GSDevTools instance with default settings. This enables the visual UI for global animations.

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

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

### eventCallback Method

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

This section details the usage of the eventCallback method for GSAP animations, including its parameters, return values, and practical examples for setting and getting callbacks.

```APIDOC
## eventCallback

### Description
Gets or sets an event callback like `"onComplete", "onUpdate", "onStart"` or or `"onRepeat"` along with any parameters that should be passed to that callback.

### Method
`eventCallback( type:String, callback:Function, params:Array ) : [Function | self]`

### Parameters
#### Path Parameters
- **type** (String) - Required - The type of event callback, like `"onComplete", "onUpdate", "onStart"` or or `"onRepeat"`. This is case-sensitive.
- **callback** (Function) - Optional - The function that should be called when the event occurs. Defaults to `null`.
- **params** (Array) - Optional - An array of parameters to pass the callback. Defaults to `null`.

### Returns
- `Function` - If only the `type` parameter is provided, returns the current callback function.
- `self` - If `callback` or `params` are provided, returns the animation instance for chaining.

### Details
This method allows setting callbacks after an animation instance has been created and inspecting or deleting them. You can only have one callback associated with each event type; setting a new one overwrites the old one. The values are also stored in the `vars` object.

### Request Example
```javascript
// Setting a callback
myAnimation.eventCallback('onComplete', myFunction, ['param1', 'param2']);

// Deleting a callback
myAnimation.eventCallback('onUpdate', null);

// Getting a callback
let currentOnStart = myAnimation.eventCallback('onStart');
```

### Response
#### Success Response (200)
- **callback** (Function) - The current callback function for the specified event type (when used as a getter).
- **self** (Object) - The animation instance (when used as a setter).

#### Response Example
```json
// Example response when getting a callback
{
  "callback": "myFunction"
}

// Example response when setting a callback (returns the instance for chaining)
{
  "instance": "myAnimation"
}
```
```

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

### Create GSDevTools Instance

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

Initialize GSDevTools with an optional configuration object. It's recommended to directly define the animation for better control.

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

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

### SlowMo Configuration Examples

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

Shows default usage, custom parameter configuration, and synchronized opacity tweens using yoyoMode.

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

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

### Create ScrollTrigger with isActive check

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

Example of creating a ScrollTrigger and logging its isActive state when toggled. The isActive property is only true when the scroll position is between the start and end of the ScrollTrigger.

```javascript
ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  end: "+=500",
  onToggle: (self) => console.log("toggled. active?", self.isActive),
});
```

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

### Start Tracking Properties with VelocityTracker

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

Use the static VelocityTracker.track() method to begin tracking specific properties of an object. The method returns an array of tracker instances; access the first one to get velocity data. Ensure at least 100ms and 2 ticks have passed before calling get() for accurate results.

```javascript
var tracker = VelocityTracker.track(obj, "x,y")[0];
var vx = tracker.get("x");
var vy = tracker.get("y");
```

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

### Initialize MotionPathHelper

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

Register the plugin, set initial element states, and create the helper instance for interactive path editing.

```javascript
//register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin);

gsap.set(".astronaut", {scale: 0.5, autoAlpha: 1});

gsap.to(".astronaut", {
  duration: 5, 
  ease: "power1.inOut",
  immediateRender: true,
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5],
    autoRotate: 90
  }
});

MotionPathHelper.create(".astronaut");
```

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

### Interpolate Numbers, Strings, Colors, and Objects

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

Use this method to get an interpolated value directly by providing start, end, and progress values. Supports various data types.

```javascript
gsap.utils.interpolate(0, 500, 0.5); // 250
```

```javascript
gsap.utils.interpolate("20px", "40px", 0.5); // "30px"
```

```javascript
gsap.utils.interpolate("red", "blue", 0.5); // "rgba(128,0,128,1)"
```

```javascript
gsap.utils.interpolate(
  { a: 0, b: 10, c: "red" },
  { a: 100, b: 20, c: "blue" },
  0.5
); // {a: 50, b: 15, c: "rgba(128,0,128,1)"}
```

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

### Usage Example for Image Sequence Helper

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

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

```javascript
imageSequence({
  urls, // Array of image URLs
  canvas: "#image-sequence", // <canvas> object to draw images to
  scrollTrigger: {
    start: 0,   // start at the very top
    end: "max", // entire page
    scrub: true // important!
  }
});
```

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

### ScrollTrigger onLeaveBack Callback Example

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

Execute a function when the scroll position moves backward past the 'start' of the trigger. The callback receives the ScrollTrigger instance with properties like progress, direction, and isActive.

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

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

### ScrollTrigger onEnter Callback Example

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

Execute a function when the scroll position moves forward past the 'start' of the trigger. The callback receives the ScrollTrigger instance with properties like progress, direction, and isActive.

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

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

### Configure GSAP Timeline Special Properties

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

Example of initializing a timeline with lifecycle callbacks and repeat settings.

```javascript
gsap.timeline({
  onComplete: myFunction,
  repeat: 2,
  repeatDelay: 1,
  yoyo: true,
});
```

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

### Define ScrollTrigger Positions with Keywords

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

Specify the start and end points of a ScrollTrigger using intuitive keywords like 'top', 'center', and 'bottom', often in combination with viewport or element references. This example shows the center of the trigger element aligning with the center of the viewport.

```javascript
start: "center center"
```

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

### progress() Method

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

Documentation for the progress() method which manages the tween's playhead position.

```APIDOC
## progress(value, suppressEvents)

### Description
Gets or sets the tween's progress, a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats).

### Parameters
#### Parameters
- **value** (Number) - Optional - The progress value to set (0 to 1). If omitted, returns the current progress.
- **suppressEvents** (Boolean) - Optional - If true, no events or callbacks are triggered when moving the playhead.

### Returns
- **Number | self** - Returns the current progress value if no argument is provided, or the tween instance itself if a value is set (for chaining).

### Request Example
// Gets current progress
var progress = myTween.progress();

// Sets progress to one quarter finished
myTween.progress(0.25);
```

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

### Snap values using radius and configuration

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

Demonstrates snapping numbers and 2D points to specific values or increments within a defined radius.

```javascript
// snapping only occurs when the provided value is within a radius of 20 from one of the values in the array
gsap.utils.snap({ values: [0, 100, 300], radius: 20 }, 30.5); // 30.5 (because it's not within 20 of any values)

// this will snap because it's within the radius:
gsap.utils.snap({ values: [0, 100, 300], radius: 20 }, 85); // 100

// also works with points (objects with "x" and "y" properties):
var point = { x: 8, y: 8 };
gsap.utils.snap(
  {
    values: [
      { x: 0, y: 0 },
      { x: 10, y: 10 },
      { x: 20, y: 20 },
    ],
    radius: 5,
  },
  point
); // {x:10, y:10}

// snapping only occurs when the provided value is within a radius of 150 from any increment of 500
gsap.utils.snap({ increment: 500, radius: 150 }, 975); // 1000 (because it's within 150 of an increment of 500)
```

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

### Insert animation relative to previous start

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

Uses the '<' symbol to align the start of the current animation with the start of the previously inserted animation.

```javascript
// insert at the START of the  previous animation
tl.to(".class", { x: 100 }, "<");
```

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

### Initialize LottieScrollTrigger

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

Example usage of the LottieScrollTrigger function, demonstrating how to pass configuration options and override ScrollTrigger defaults.

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

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

### GSAP Timeline fromTo Example

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

Demonstrates the basic usage of the `fromTo` method to animate an element's x-property from -100 to 100 with a duration of 1 second.

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

var tween = gsap.fromTo(element, { x: -100 }, { duration: 1, x: 100 });
tl.add(tween);

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

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

### Insert animation at the start of the previous animation

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

Uses the '<' pointer to align the start of the current animation with the start of the previously inserted animation.

```javascript
// insert at the START of the  previous animation
tl.fromTo(".class", { x: 100 }, { x: 200 }, "<");
```

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

### Positioning Animation Relative to Start of Most Recent

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

Adds an animation relative to the start of the most recently added animation. Use `<offset` for positioning after the start, or `<-offset` for positioning before.

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

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

### GSAP Timeline Configuration

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

Demonstrates how to use special properties and callbacks when creating a GSAP timeline.

```APIDOC
## POST /api/gsap/timeline

### Description
Allows configuration of GSAP timelines with special properties and callbacks.

### Method
POST

### Endpoint
/api/gsap/timeline

### Parameters
#### Request Body
- **onComplete** (Function) - A function that should be called when the animation has completed.
- **repeat** (Number) - Number of times that the animation should repeat after its first iteration. Use -1 for infinite repeats.
- **repeatDelay** (Number) - Amount of time in seconds between repeats.
- **yoyo** (Boolean) - If true, the animation will play forwards and then backwards.
- **autoRemoveChildren** (Boolean) - If true, child tweens/timelines are automatically killed/removed upon completion.
- **callbackScope** (Object) - The scope for all callbacks.
- **defaults** (Object) - Default properties inherited by child animations.
- **delay** (Number) - Delay in seconds before the animation begins.
- **onCompleteParams** (Array) - Parameters to pass to the `onComplete` function.
- **onInterrupt** (Function) - Function to call when the animation is interrupted.
- **onInterruptParams** (Array) - Parameters to pass to the `onInterrupt` function.
- **onRepeat** (Function) - Function to call each time the animation repeats.
- **onRepeatParams** (Array) - Parameters to pass to the `onRepeat` function.
- **onReverseComplete** (Function) - Function to call when the animation reaches its beginning from the reverse direction.
- **onReverseCompleteParams** (Array) - Parameters to pass to the `onReverseComplete` function.
- **onStart** (Function) - Function to call when the animation begins.
- **onStartParams** (Array) - Parameters to pass to the `onStart` function.
- **onUpdate** (Function) - Function to call every time the animation updates.
- **onUpdateParams** (Array) - Parameters to pass to the `onUpdate` function.
- **paused** (Boolean) - If true, the animation pauses upon creation.
- **repeatRefresh** (Boolean) - Indicates if the repeat should refresh.

### Request Example
```json
{
  "onComplete": "myFunction",
  "repeat": 2,
  "repeatDelay": 1,
  "yoyo": true
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation of timeline creation.

#### Response Example
```json
{
  "message": "Timeline created successfully."
}
```
```

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

### Using the pause() method

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

Demonstrates pausing at the current playhead position, jumping to a specific time, and controlling event suppression.

```javascript
//pauses wherever the playhead currently is:
tl.pause();

//jumps to exactly 2-seconds into the animation and then pauses:
tl.pause(2);

//jumps to exactly 2-seconds into the animation and pauses but doesn't suppress events during the initial move:
tl.pause(2, false);
```

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

### Set Animation Start Position

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

Specify the starting position along the path (0=beginning, 1=end). Accepts any decimal number.

```javascript
start: 0.3
```

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

### Add animation at the start of the previous animation

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

Use '<' to insert an animation at the exact start time of the previously added animation.

```javascript
tl.add(animation, "<");
```

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

### Flip.from() Config Object Properties

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

Detailed explanation of each optional property within the config object for Flip.from().

```APIDOC
## Flip.from() Config Object Properties

The `Flip.from()` method accepts a configuration object as its second parameter. This object can include any standard tween properties (like `duration`, `ease`, `onComplete`) in addition to the following optional properties:

### Property

### Description

#### absolute

*   **Type**: Boolean | String | Array | NodeList | Element
*   **Description**: Specifies which of the targets should have `position: absolute` applied during the course of the FLIP animation. If `true`, all targets are affected. You can also use selector text (e.g., `".box"`), an Array or NodeList of Elements, or a single Element to specify a subset of targets. This is useful for solving layout challenges with flex and grid layouts. If animations aren't seamless, try setting `absolute: true`. Be aware that `position: absolute` removes elements from the document flow, potentially causing layout collapse. In such cases, define a subset that doesn't include the container element to maintain layout.
*   **Added**: 3.9.0

#### absoluteOnLeave

*   **Type**: Boolean
*   **Description**: If `true`, any "leaving" Elements (passed to `onLeave()`) will be set to `position: absolute` during the flip animation. This is useful when hiding elements with `display: none` but you still want to animate them out (e.g., fade, scale). It ensures they don't affect layout while remaining visible during the animation.
*   **Added**: 3.9.0

#### fade

*   **Type**: Boolean
*   **Description**: By default, if the target element associated with a `data-flip-id` in the previous state is different from the one in the end state, it's swapped immediately. Set `fade: true` for a cross-fade effect. This only applies when swapping elements. If the "swapping out" (leaving) element has `display: none` (CSS), it won't be visible for fading. However, if `absolute: true` is also set, it forces the element to its previous display state *during* the flip, enabling cross-fading. `absolute: true` is necessary because otherwise, the element would affect document flow and disrupt positioning.

#### nested

*   **Type**: Boolean
*   **Description**: If the Flip animation involves nested targets (e.g., a parent and its child are both targets), set `nested: true` to enable extra calculations that prevent movements from compounding. Without this, a parent's movement affects its children; if both are animated by the same amount, the child could move twice the intended distance.

#### onEnter

*   **Type**: Function
*   **Description**: A callback function executed when a target is either not found in the original `state` or was not in the document flow (e.g., `display: none`) but *is* in the document flow in the **end** state. Since there's no original position/size data, it won't be part of the flip animation. The callback receives an Array of entering elements, allowing you to animate them (e.g., fade them in). Any animation returned by this callback is added to the flip timeline and forced to completion if interrupted.
*   **Example**: `onEnter: elements => gsap.fromTo(elements, {opacity: 0}, {opacity: 1})`

#### onLeave

*   **Type**: Function
*   **Description**: A callback function executed when a target is present in the original `state` but not the end state, or if it's not in the document flow in the end state (e.g., `display: none`). Since there's no end state position/size data, it won't be part of the flip animation. The callback receives an Array of leaving elements, allowing you to animate them (e.g., fade them out). **Important**: these elements remain visible only if `absolute: true` is also set (otherwise, they affect document flow). If `absolute: true` is set, the `display` property is temporarily forced to its previous state during the flip and then reverted. Any animation returned by this callback is added to the flip timeline and forced to completion if interrupted.
*   **Example**: `onLeave: elements => gsap.fromTo(elements, {opacity: 1}, {opacity: 0})`

#### props

*   **Type**: String[]
*   **Description**: An array of property names that GSAP should watch for changes. By default, GSAP watches `"x," "y, " "scale, " "rotation"`. If you need to animate other properties (like `"width, " "height"`), you can add them to this array.
*   **Added**: 3.10.0
```

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

### Timeline Configuration Methods

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

Methods for configuring timeline playback behavior like scaling and yoyo effects.

```APIDOC
## timeScale(value: Number)

### Description
Factor used to scale time in the animation (1 = normal, 0.5 = half, 2 = double).

## yoyo(value: Boolean)

### Description
Gets or sets the timeline's yoyo state, causing it to alternate backward and forward on each repeat.

## totalDuration(value: Number)

### Description
Gets or sets the total duration of the timeline in seconds including any repeats or repeatDelays.
```

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

### Insert call relative to previous animation start

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

Uses the '<' pointer to place a function call at the start of the previously inserted animation.

```javascript
// insert at the START of the  previous animation
tl.call(myFunction, null, "<");
```

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

### Positioning Animation at Start of Most Recent Animation

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

Inserts an animation at the exact start of the most recently added animation in the timeline. Use `<` as the position parameter.

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

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

### Method: restart()

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

Restarts and begins playing the animation forward from the beginning.

```APIDOC
## restart(includeDelay, suppressEvents)

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

### Parameters
- **includeDelay** (Boolean) - Optional - (default = false) Determines whether or not the delay (if any) is honored when restarting.
- **suppressEvents** (Boolean) - Optional - (default = true) If true, no events or callbacks will be triggered when the playhead moves to the new position.

### Returns
- **self** - Returns the instance to allow for method chaining.

### Request Example
// restarts, not including any delay that was defined
tl.restart();

// restarts, including any delay, and doesn't suppress events during the initial move back to time:0
tl.restart(true, false);
```

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

### GSAP Tween Example

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

A basic example of using gsap.to() to animate properties like rotation, x-translation, and duration for elements with the class 'box'.

```javascript
gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

```

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

### Accessing the SplitText vars object

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

Demonstrates how to retrieve the configuration object used during instance creation.

```javascript
let splitText = SplitText.create({
  type: "chars,words",
  wordsClass: "word++",
});

console.log(splitText.vars); // {type: "chars,words",wordsClass: "word++",}
```

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

### Set Animation Callback with Parameters

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

This example demonstrates setting an 'onComplete' callback with custom parameters, equivalent to defining it in the constructor.

```javascript
gsap.to(obj, {
	duration: 1,
	x: 100,
	onComplete: myFunction,
	onCompleteParams: ['param1', 'param2']
});
```

```javascript
myAnimation.eventCallback('onComplete', myFunction, ['param1', 'param2']);
```

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

### Get and Animate CSS Rule

Source: https://gsap.com/docs/v3/Plugins/CSSRulePlugin/methods/static-getRule%28%29

Use CSSRulePlugin.getRule to get a CSS rule object and then tween its CSS properties. Ensure the CSSRulePlugin.js file is loaded.

```javascript
var rule = CSSRulePlugin.getRule(".myClass::before"); //get the rule
gsap.to(rule, {duration: 3, cssRule: {color: "#0000FF"}});
```

```javascript
gsap.to(CSSRulePlugin.getRule(".myClass::before"), {
  duration: 3,
  cssRule: { color: "#0000FF" },
});
```

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

### Add animation relative to the start of the previous animation

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

Use '<+=' to add an animation a specified duration after the start of the previous animation. '<3' is a shorthand for '<+=3'.

```javascript
tl.add(animation, "<+=3");
tl.add(animation, "<3");
```

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

### Start Tracking Object Properties

Source: https://gsap.com/docs/v3/Plugins/InertiaPlugin/static.track%28%29

Initiates tracking for specified properties of an object. Use this before creating inertia tweens that rely on automatically detected velocity.

```javascript
InertiaPlugin.track(obj, "x,y");
```

```javascript
InertiaPlugin.track(".class", "x,y");
```

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

### Observer.create() Configuration

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

Details the properties available in the configuration object passed to Observer.create().

```APIDOC
## Observer.create() Configuration

### Description
The configuration object passed to `Observer.create()` defines how the observer handles input events, including movement tracking, axis locking, and event callbacks.

### Parameters
#### Request Body
- **axis** (string) - Optional - When `lockAxis: true` is set, this property is set to "x" or "y" based on the first drag movement.
- **capture** (Boolean) - Optional - If `true`, uses the capture phase for event listeners.
- **debounce** (Boolean) - Optional - If `false`, disables event debouncing for immediate processing.
- **dragMinimum** (Number) - Optional - Minimum distance in pixels to trigger a drag event.
- **id** (String) - Optional - Arbitrary ID for retrieving the observer later.
- **ignore** (Element | String | Array) - Optional - Elements to ignore when triggering events.
- **lockAxis** (Boolean) - Optional - If `true`, locks movement to the initial drag direction.
- **onChange** (Function) - Optional - Callback for movement on either axis.
- **onChangeX** (Function) - Optional - Callback for horizontal movement.
- **onChangeY** (Function) - Optional - Callback for vertical movement.
- **onClick** (Function) - Optional - Callback for click events.
- **onDown** (Function) - Optional - Callback for downward motion.
- **onDragStart** (Function) - Optional - Callback for start of drag.
- **onDrag** (Function) - Optional - Callback during drag.
- **onDragEnd** (Function) - Optional - Callback for end of drag.
- **onLeft** (Function) - Optional - Callback for leftward motion.
- **onLockAxis** (Function) - Optional - Callback when axis is locked.
- **onHover** (Function) - Optional - Callback for hover start.
- **onHoverEnd** (Function) - Optional - Callback for hover end.
```

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

### Get and Set Timeline Repeat Count

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

Demonstrates how to get the current repeat value of a timeline and how to set it to a specific number. This method acts as both a getter and a setter.

```javascript
//gets current repeat value
var repeat = tl.repeat();

//sets repeat to 2
tl.repeat(2);
```

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

### Get and Set yoyo State with GSAP

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

Use the yoyo() method to get the current yoyo state or set it to true or false. This method returns the instance for chaining.

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

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

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

### Demonstrate Scoping Issues

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

HTML structure and problematic animation code that demonstrates why global selection is insufficient for component-based architectures.

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

```html
<my-component>
<my-component>
<my-component>
```

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

```javascript
myComponent.addEventListener("click", () =>
  gsap.to(".my-component .box", { x: 100, stagger: 0.1 })
);
```

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

### Use fromTo for Undefined Starting Values

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

When a CSS property is not initially defined in a rule, use `gsap.fromTo()` to explicitly set both the starting and ending values to avoid unexpected behavior.

```javascript
// Example of using fromTo if color wasn't initially defined for .myClass::before
// gsap.fromTo(rule, { duration: 3, cssRule: { color: "transparent" } }, { duration: 3, cssRule: { color: "blue" } });
```

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

### Setting GSAP Default Easing

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

Shows how to set a global default ease for all subsequent tweens using `gsap.defaults()`. Also demonstrates setting defaults for a specific timeline.

```javascript
gsap.defaults({
  ease: "power2.in",
  duration: 1,
});

gsap.timeline({defaults: {ease: "power2.in"}})

```

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

### GSDevTools Methods

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

Information about the available methods for GSDevTools, including the static `create` method.

```APIDOC
## Methods

|                                                                                                          |
| -------------------------------------------------------------------------------------------------------- | 
| #### [GSDevTools.create](/docs/v3/Plugins/GSDevTools/static.create\(\).md)( config:Object ) : GSDevTools |
```

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

### Chain Multiple Event Callbacks

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

This example shows how to chain multiple eventCallback calls to set different callbacks and parameters, and then chain a 'play' method call.

```javascript
myAnimation
	.eventCallback('onComplete', completeHandler)
	.eventCallback('onUpdate', updateHandler, ['param1'])
	.play(1);
```

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

### Get and Set repeatDelay in GSAP

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

Use repeatDelay() without a parameter to get the current delay between repeats. Provide a numeric value to set a new delay, which is useful for chaining methods.

```javascript
//gets current repeatDelay value
var repeatDelay = myTween.repeatDelay();

//sets repeatDelay to 2
myTween.repeatDelay(2);
```

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

### Configure and Manipulate GSAP Timelines

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

Demonstrates timeline creation with repeat settings, adding tweens with sequencing offsets, label management, and nesting.

```javascript
// create the timeline that repeats 3 times
// with 1 second between each repeat and
// then call myFunction() when it completes
var tl = gsap.timeline({ repeat: 3, repeatDelay: 1, onComplete: myFunction });

// add a tween
tl.to(".class", { duration: 1, x: 200, y: 100 });

// add another tween 0.5 seconds after the end
// of the timeline (makes sequencing easy)
tl.to("#id", { duration: 0.8, opacity: 0 }, "+=0.5");

// reverse anytime
tl.reverse();

// Add a "spin" label 3-seconds into the timeline
tl.addLabel("spin", 3);

// insert a rotation tween at the "spin" label
// (you could also define the insertion point as the time instead of a label)
tl.to(".class", { duration: 2, rotation: "+=360" }, "spin");

// go to the "spin" label and play the timeline from there
tl.play("spin");

// nest another timeline inside your timeline...
var nested = gsap.timeline();
nested.to(".class2", { duration: 1, x: 200 });
tl.add(nested, "+=3"); //add nested timeline after a 3-second gap
```

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

### ScrollTrigger.getVelocity()

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

Gets the scroll velocity in pixels-per-second.

```APIDOC
## GET /ScrollTrigger/getVelocity

### Description
Gets the scroll velocity in pixels-per-second.

### Method
GET

### Endpoint
/ScrollTrigger/getVelocity
```

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

### Configure SplitText Options

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

Shows how to customize splitting behavior, including type selection, masking, and class naming.

```javascript
let split = SplitText.create(".split", {
  type: "words, lines", // only split into words and lines (not characters)
  mask: "lines", // adds extra wrapper element around lines with overflow: clip (v3.13.0+)
  linesClass: "line++", // adds "line" class to each line element, plus an incremented one too ("line1", "line2", "line3", etc.)

  // there are many other options - see below for a complete list
});
```

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

### Add Pause Relative to Start of Previous Animation in GSAP Timeline

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

Use '<' followed by a relative duration (e.g., "<+=3" or "<3") to position a pause a specific time after the start of the previous animation.

```javascript
tl.addPause("<+=3");
```

```javascript
tl.addPause("<3");
```

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

### Initialize ScrollSmoother

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

Basic configuration to enable smooth scrolling and effects.

```javascript
ScrollSmoother.create({
	smooth: 1,
	effects: true
});
```