GSAP

https://gsap.com/docs/
Admin
GSAP is a robust JavaScript animation library that enables developers to create high-performance,...
Tokens:609,470
Snippets:3,803
Trust Score:9.4
Update:1 week ago
Show doc for...
Tokens:
Raw
### Simplistic desktop/mobile example with gsap.matchMedia()

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

Shows two separate media queries for desktop and mobile setups, each with its own handler function.

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

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

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

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

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

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

### mm.add()

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

Adds a media query and a setup function that runs when the query matches. The setup function can optionally return a cleanup function that runs when the query stops matching.

```APIDOC
## mm.add()

### Description
Adds a media query and a setup function. When the media query matches, the setup function runs. When it stops matching, all GSAP animations and ScrollTriggers created during the setup function's execution are reverted automatically. If the setup function returns a function, that function is called as a cleanup when the query stops matching.

### Method
`mm.add(mediaQuery, setupFunction)`

### Parameters
- **mediaQuery** (string) - Required - A media query string, exactly as you would pass to `window.matchMedia()`.
- **setupFunction** (function) - Required - The function to run when the media query matches. It can optionally return a cleanup function.

### Returns
- **MatchMedia** - The MatchMedia instance (for chaining).

### Usage Example
```js
let mm = gsap.matchMedia();
mm.add("(min-width: 800px)", () => {
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...});
  return () => {
    // custom cleanup code here (runs when it STOPS matching)
  };
});
```

```

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

### Minimal FLIP demo: HTML, CSS, and JS files

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

Complete minimal demo showing how to use the flip helper. Includes HTML structure with two containers and a button, CSS styling for the UI, and JavaScript that moves a box between containers on click, triggering the flip animation. This is the working example referenced by the DEMO section.

```html
<h1>Minimal FLIP Demo</h1>
<div class="containers">
  <div id="container1" class="container">
    <div id="box"></div>
  </div>
  <div id="container2" class="container"></div>
</div>

<button id="button">FLIP</button>
```

```css
body {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

h1 {
  font-weight: 400;
}
* {
  position: relative;
}

.containers {
  width: 100%;
  display: flex;
  align-items: space-around;
  justify-content: space-around;
}

.container {
  width: 130px;
  height: 130px;
  outline: 2px dashed var(--color-surface-white);
  z-index: 1;
  border-radius: 5px;
}

#box {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: var(--gradient-emerald-city),
    url(/demo-assets/noise.webp);
  background-blend-mode: color-dodge;
}

button {
  margin-top: 30px;
  cursor: pointer;
}

#container1::before,
#container2::before {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
}
#container1::before {
  content: "#container1";
}
#container2::before {
  content: "#container2";
}
```

```javascript
var container1 = document.querySelector("#container1");
var container2 = document.querySelector("#container2");
var button = document.querySelector("#button");
var box = document.querySelector("#box");

button.addEventListener("click", onClick);

function onClick() {
  flip([box], swapPosition);
}

function swapPosition() {
  var parent = box.parentElement === container1 ? container2 : container1;
  parent.appendChild(box);
}

function flip(elements, changeFunc, vars) {
  elements = gsap.utils.toArray(elements);
  vars = vars || {};
  let tl = gsap.timeline({onComplete: vars.onComplete, delay: vars.delay || 0}),
      bounds = elements.map(el => el.getBoundingClientRect()),
      copy = {},
      p;
  elements.forEach(el => {
    el._flip && el._flip.progress(1);
    el._flip = tl;
  })
  changeFunc();
  for (p in vars) {
    p !== "onComplete" && p !== "delay" && (copy[p] = vars[p]);
  }
  copy.x = (i, element) => "+=" + (bounds[i].left - element.getBoundingClientRect().left);
  copy.y = (i, element) => "+=" + (bounds[i].top - element.getBoundingClientRect().top);
  return tl.from(elements, copy);
}
```

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

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

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

### 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());

```

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

### HTML, CSS, and JS for fromTo() demo

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

Complete demo showing HTML, CSS, and JavaScript for animating a box with autoAlpha and x properties.

```html
<div class="box green"></div>
```

```css
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
```

```javascript
//animate ".box" from an opacity of 0 to an opacity of 0.5
gsap.fromTo(
  ".box",
  { autoAlpha: 0, x: -200 },
  { autoAlpha: 1, x: 200, duration: 1 }
);
```

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

### onEnter callback example

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

Callback for entering elements, receives an array of elements and returns a GSAP animation that gets added to the flip timeline.

```javascript
onEnter: elements => gsap.fromTo(elements, {opacity: 0}, {opacity: 1})
```

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

### Simple Demo: CSS styling

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

CSS for the demo, including layout, box styling, gradients, and overflow toggle.

```css
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui;
  background: var(--color-just-black);
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.button-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  gap: 1rem;
}

.wrapper {
  height: 300px;
  max-height: 50vh;
  width: 70%;
  border-left: dashed 2px var(--color-surface50);
  border-right: dashed 2px var(--color-surface50);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  padding: 0.5rem;
  flex-shrink: 0;
  height: 80%;
  width: 20%;
  min-width: 150px;
}

.box__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 21px;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.show-overflow {
  overflow: visible;
}

.box .box__inner {
  background: linear-gradient(var(--color-just-black), var(--color-just-black))
      padding-box,
    var(--gradient) border-box;
  border: 3px solid transparent;
  border-radius: 10px;
}

.box {
  --gradient: var(--gradient-macha);
}

.box:nth-child(3n + 2) {
  --gradient: var(--gradient-summer-fair);
}

.box:nth-child(3n + 1) {
  --gradient: var(--gradient-orange-crush);
}

.box p {
  -webkit-text-fill-color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 3rem;
}
```

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

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

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

### HTML for simple demo

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

HTML structure for the comparison demo between ExpoScaleEase and linear easing.

```html
<div id="container">
  <div id="expo">
    <img src="/demo-assets/106114/zoom-15.jpg" />
    <div class="label">ExpoScaleEase</div>
  </div>


  <div id="linear">
    <img src="/demo-assets/106114/zoom-15.jpg" />
    <div class="label">Linear easing</div>
</div>

<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>
```

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

### onLeaveBack callback example

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

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

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

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

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

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

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

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

Example CSS with a class and a pseudo-element selector used to demonstrate CSSRulePlugin.getRule().

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

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

### Draggable getDirection() Example

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

Creates a draggable box and updates direction indicators using getDirection() with 'start', 'velocity', and an element reference. Requires InertiaPlugin for velocity direction.

```javascript
/*
This demo illustrates direction sensing capabilities in Draggable

Watch a video explaining all the details: https://greensock.com/gsap-1-16

The getDirection() method can determine
 - direction from where the drag started
 - momementary direction 
 - direction relative to any elment

*/
var directionStart = document.getElementById("directionStart"),
    directionVelocity = document.getElementById("directionVelocity"),
    directionObject = document.getElementById("directionObject"),
    original = document.getElementById("original"),
		logoElement = document.getElementById("logoElement");

Draggable.create("#box1", {
  bounds:"#container",
  edgeResistance:0.65,
  inertia:true,
  autoScroll:1,
  onDrag:updateDirections,
  onThrowUpdate:updateDirections,
  onThrowComplete:function() {
    //move the original marker to end position
    gsap.to(original, {duration:1, x:this.x, y:this.y});
  }
});

function updateDirections() {
    //getDirection() can return 3 types of direction...
    directionStart.innerHTML = '"' + this.getDirection("start") + '"'; //direction from start of drag
    directionVelocity.innerHTML = '"' + this.getDirection("velocity") + '"'; //momentary velocity *requires InertiaPlugin
    directionObject.innerHTML = '"' + this.getDirection(logoElement) + '"'; //direction from an object
}

gsap.set(logoElement, {xPercent:-50, yPercent:-50})

/*
See https://www.greensock.com/draggable/ for details about Draggable. 
This demo uses InertiaPlugin which is a membership benefit of Club GreenSock, https://www.greensock.com/club/
InertiaPlugin is necessary for getDirection("velocity").
*/
```

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

### CSS for Flip.fit() example

Source: https://gsap.com/docs/v3/Plugins/Flip/static.fit%28%29

The CSS styles for the example, including the container, children, target, and button elements.

```css
* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: 100px 1fr;
  justify-items: stretch;
  align-items: center;
  overflow: hidden; /* otherwise, if the scrollbar disappears as a result of the tween, the viewport actually gets resized, meaning the measurements are different! */
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.boxes {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.target {
  position: relative;
  background: var(--color-ui-gradient);
  width: 120px;
  height: 50px;
  text-align: center;
  border-radius: 10px;
  color: var(--color-just-black);
}

.container {
  width: 40%;
  border-radius: 10px;
  border: 2px dashed var(--color-surface-white);
  text-align: center;
  padding: 15px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.child1, .child2 {
  background: var(--gradient-summer-fair);
  height: 50px;
  width: 120px;
  text-align: center;
  margin: 15px 0;
  line-height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-just-black);
}

.child1 {
  background: transparent;
  border: 2px dashed var(--color-surface-white);
}

h1 {
  font-weight: 400;
}

.button {
  padding: 10px 20px;
  margin-bottom: 10px;
}
.logo {
  position: absolute;
  width: 60px;
  bottom: 20px;
  right: 30px;
}

.target:after {
  content: "target";
  position: absolute;
  bottom: 100%;
  padding-bottom: 0.5rem;
  left: 5px;
  color: #888;
  font-size: 0.75em;
}
```

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

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

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

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

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

### Link to simpler zoom example

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

Comment directing to a simpler single-image example on CodePen. Not executable code.

```javascript
//for a simpler example that only shows a single image, 
//see https://codepen.io/GreenSock/pen/6239c068e182bdb8ff18926f519f8565
```

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

### MorphSVG origin option example

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

Sets a custom origin for rotational morphs. The origin can be a string of two percentage values, or four values if start and end shapes differ.

```javascript
gsap.to("#shape1", {
  duration: 2,
  morphSVG: {
    shape: "#shape2",
    type: "rotational",
    origin: "20% 60%", //or "20% 60%,35% 90%" if there are different values for the start and end shapes.
  },
});
```

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

### Combine quickTo with pipe(), clamp(), and snap()

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

Creates a function that clamps input to 0-100, snaps to nearest 5, then animates the x property of #id with 0.8s duration and power3 ease. Later calls like xTo(150) and xTo(3) show the clamped/snapped results.

```javascript
let xTo = 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.quickTo("#id", "x", {duration: 0.8, ease: "power3"}) // apply it to the #id element's x property, have it take 0.8 seconds each time it's updated, and use a "power3" ease
  );

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

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

### gsap.matchMedia().add() with conditions object

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

Shows how to use the conditions syntax to set up multiple media queries with a single handler, including checking conditions and returning a cleanup function.

```APIDOC
## gsap.matchMedia().add(conditions, handler)

### Description
Adds a handler function that runs when any of the specified media query conditions match. The handler receives a context object with a `conditions` property containing boolean flags for each condition. The handler can optionally return a cleanup function that is called when none of the conditions match anymore.

### Method
`add`

### Parameters
- **conditions** (Object) - Required - An object with arbitrarily-named properties, each mapping to a media query string. The handler is called when any of these conditions match.
- **handler** (Function) - Required - A callback function that receives a `context` object. The `context.conditions` object has boolean properties for each condition defined in the conditions object. The handler can optionally return a cleanup function.

### Return Value
- **MatchMedia** - The MatchMedia instance for chaining.

### Example
```javascript
let mm = gsap.matchMedia(),
  breakPoint = 800;

mm.add(
  {
    isDesktop: `(min-width: ${breakPoint}px)`,
    isMobile: `(max-width: ${breakPoint - 1}px)`,
    reduceMotion: "(prefers-reduced-motion: reduce)",
  },
  (context) => {
    let { isDesktop, isMobile, reduceMotion } = context.conditions;

    gsap.to(".box", {
      rotation: isDesktop ? 360 : 180,
      duration: reduceMotion ? 0 : 2,
    });

    return () => {
      // cleanup code
    };
  }
);
```

### Notes
- The handler is reverted and re-run when any of the conditions toggle (i.e., a matching condition stops matching or a non-matching condition starts matching).
- A `Context` is created and passed as the only parameter to the handler. This context can be used to create animations or ScrollTriggers that should be reverted when `revert()` is called on the MatchMedia.
- The cleanup function should not call `context.revert()`; it is called automatically.
```

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

### Advanced ScrollTrigger.batch() example with refreshInit

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

Advanced usage with interval, batchMax, start, end, and callbacks for enter/leave/enterBack/leaveBack. Includes a refreshInit listener to reset transforms for accurate positioning during refresh.

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

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

### 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"}

```

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

### gsap.matchMedia()

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

Creates a MatchMedia instance for managing media-query-based animations.

```APIDOC
## gsap.matchMedia()

### Description
Creates a MatchMedia instance that lets you define setup code that runs only when a media query matches. When the media query stops matching, all GSAP animations and ScrollTriggers created within the setup function are reverted automatically.

### Method
`gsap.matchMedia()`

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

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

### Related Methods
- `mm.add(mediaQuery, setupFunction)` - Adds a media query and its associated setup function.
- `mm.revert()` - Reverts all animations and ScrollTriggers created by the MatchMedia instance.

```

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

### onLeave callback example

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

Callback for leaving elements, receives an array of elements and returns a GSAP animation that gets added to the flip timeline. Requires absolute: true to be visible.

```javascript
onLeave: elements => gsap.fromTo(elements, {opacity: 1}, {opacity: 0})
```

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

### Demo: CSS for editable path

Source: https://gsap.com/docs/v3/MotionPathHelper/static.editPath%28%29

CSS styling for the demo, including layout and path styling.

```css
body {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 100vh;
}

#motionPath {
  overflow: visible;
  height: 100%;
  max-width: 100%;
}

#motionPath path {
  stroke-width: 2;
  stroke: gray;
}

#motionPath .astronaut {
  visibility: hidden;
}
```

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

### clamp() speed attribute example

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

Shows how to wrap a speed value in clamp() to make elements start at their native position if they are above the fold. This prevents start/end values from leaking outside page bounds.

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

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

### ScrollTrigger.matchMedia() example with desktop, mobile, and all breakpoints

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

Shows how to define different animations for different media queries. The 'all' function runs on all screen sizes. ScrollTrigger.saveStyles() records initial inline CSS so ScrollTrigger can revert them later.

```javascript
// record the initial inline CSS for these elements so that ScrollTrigger can revert them even if animations add inline styles later
ScrollTrigger.saveStyles(".panel, #logo"); // if you put this INSIDE one of the functions, it'll only revert the recorded elements when that media query no longer matches. You can use ScrollTrigger.saveStyles() in multiple places.

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

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

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

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

### Simple Demo CSS

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

CSS for the demo, including styles for the content, text, and dot containers. The content is initially hidden with opacity and visibility.

```css
.content {
  width: 100%;
  max-width: 1200px;
  font-size: 24px;
  opacity: 0;
  visibility: hidden;

  .content-text {
    text-align: center;
  }

  .dot-container {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1rem 0;
    gap: 10px;

    .dot {
      width: 15px;
      height: 15px;
      border-radius: 15px;
    }
  }
}
```

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

### Standalone ScrollTrigger.create() example

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

Creates a standalone ScrollTrigger instance with trigger, start, endTrigger, end, and callback functions. Use this when you need to trigger actions based on scroll position without linking to an animation.

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

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

### GSAP wrapYoyo() Implementation Example

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

A complete example showing HTML, CSS, and JavaScript to compare standard wrapping versus yoyo-style wrapping in a GSAP animation.

```html
<h4>GSAP 3 wrap() / wrapYoyo() utilities</h4>
<div id="ball1" class="ball flair flair--2"></div>
<div id="ball2" class="ball flair flair--4"></div>
```

```css
body{
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  min-height:100vh;
  flex-direction: column;
}

.ball {
  width: 100px;
  height: 100px;
  will-change: transform;
}

h4 {
  margin: 20px;
  text-align: center
}
```

```javascript
gsap.defaults({duration:20, ease:"none"});

var windowWrap = gsap.utils.wrap(0, window.innerWidth),
    windowYoyo = gsap.utils.wrapYoyo(0, window.innerWidth);

gsap.to("#ball1", {
  x: 10000,
  modifiers: {
    x: x => windowWrap(parseFloat(x)) + "px"
  }
});

gsap.to("#ball2", {
  x: 10000,
  modifiers: {
    x: x => windowYoyo(parseFloat(x)) + "px"
  }
});
```

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

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

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

### CSS styles for Flip plugin video demo

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

Provides the full CSS for the Flip plugin video example. It sets up the page layout, styles the navigation buttons with chevron icons, and positions the animated box and its final container. Includes hover, active, focus, and disabled states for the buttons.

```css
* {
  box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-weight: 300;
  font-size: 1rem;
}

.window {
	position: relative;
	height: 70vh;
	width: 40vw;
	border-top: 2rem solid #474b4c;
	border-radius: .5rem;
	background-color: #252525;
	overflow: hidden;
}

body, section {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#flip {
	width: 100%;
}

section > .steps, section > .window {
	flex-basis: 50%;
}

button {
	appearance: none;
	flex: 0 0 auto;
	display: flex;           
	align-items: center;     
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 1rem;
	padding: 0;
	border: 1px solid var(--color-surface25, #42433d);
	border-radius: 50%;
	background: transparent;
	color: var(--color-surface50, #7c7c6f);
	font-size: 0; /* hides the ‹ › characters */
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

button::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor; /* so hover/focus colors still apply */
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
}

#prev {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

#next {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

button:hover {
	color: var(--color-surface-white, #fffce1);
	border-color: var(--color-surface-white, #fffce1);
}

#prev:hover { transform: translateX(-2px); }
#next:hover { transform: translateX(2px); }

button:active {
	transform: scale(0.94);
}

button:focus-visible {
	outline: none;
	border-color: var(--color-shockingly-green, #0ae448);
	box-shadow: 0 0 0 3px rgba(10, 228, 72, 0.3);
}

button:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}


.steps {
	padding: 0 2rem;
  font-size: 1.1em;
}

.steps p:not(:first-child) {
	display: none;
}

.box, .boxPosition {
	position: absolute;
	top: 8px;
	left: 8px;
	height: 10vmin!important;
	width: 10vmin!important;
  box-sizing: content-box;
}

.boxPosition {
	top: 6px;
	left: 6px;
	visibility: hidden;
	opacity: 0;
}

.box {
	text-align: center;
	line-height: 10vmin;
	font-size: 3.5vmin;
	font-weight: 400;
	border-radius: 1vmin;
}

.initialPosition {
  border-radius: 5px;
	border: 2px dashed var(--color-blue);
}

.finalPosition {
  border-radius: 10px;
	border: 2px dashed var(--color-surface-white);
}

.finalContainer {
  position: relative;
	width: 36vmin;
	height: 36vmin;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px dashed var(--color-surface50);
  border-radius: 10px;
	transform: translate(15vmin, -12vmin) scale(1.5) rotate(-30deg);
	color: var(--color-surface75);
	padding: 1vmin;
	font-size: 2vmin;
  overflow: visible;
}

.finalContainer:after {
  content: "new container";
  position: absolute;
  bottom: 100%;
  left: 0;
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  z-index: -1;
}
.logo {
  position: absolute;
  width: 60px;
  bottom: 20px;
  right: 30px;
}

code {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-size: 1rem;
}

.gsap-logo {
  max-width: 100px;
}
```

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

### gsap.matchMedia() - Interactivity and cleanup

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

Shows how to use the Context object's add() method to collect animations created in event listeners, and how to clean up event listeners in the cleanup function.

```APIDOC
## gsap.matchMedia() - Interactivity and cleanup

### Description
This example demonstrates how to use the Context object's `add()` method to collect animations created in event listeners, and how to properly clean up event listeners in the cleanup function.

### Method
`mm.add(mediaQuery, callback)`

### Parameters
- **mediaQuery** (string) - Required - The media query string to match.
- **callback** (function) - Required - A function that receives the context object and returns a cleanup function.

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

mm.add("(min-width: 800px)", (context) => {
  context.add("onClick", () => {
    gsap.to(".box", { rotation: 360 }); // <- now it gets recorded in the Context
  });

  myButton.addEventListener("click", context.onClick);

  return () => {
    // make sure to clean up event listeners in the cleanup function!
    myButton.removeEventListener("click", context.onClick);
  };
});
```

### Response
No direct response; the method sets up animations and event listeners.
```
Tokens:
Raw