Building an Infinite GSAP Scroll Gallery with Parallax and Flip Transitions

import { gsap } from "gsap";
import { Observer } from "gsap/Observer";
import verticalLoop from "./verticalLoop.js";

gsap.registerPlugin(Observer);

/** Infinite slider driven by wheel/touch scrolling */
export default class Slider {
  constructor({ enabled = () => true, onToggle } = {}) {
    this.enabled = enabled;

    // Called with the slides that just entered or left the viewport
    this.onToggle = onToggle;

    this.createLoop();
    this.createParallax();
    this.createScrub();
    this.createObserver();

    this.resize();
  }

  /** Build vertical loop from the gallery slides */
  createLoop() {
    const gallery = document.querySelector(".gallery");

    // The gap between slides doubles as the loop's bottom padding
    const gap = parseFloat(getComputedStyle(gallery).rowGap);

    // A paused one lap timeline; its playhead is our scroll position
    this.loop = verticalLoop(".gallery__slide", {
      repeat: -1,
      paused: true,
      paddingBottom: gap,
    });

    // Wrapping the playhead past either end is what makes it endless
    this.wrap = gsap.utils.wrap(0, this.loop.duration());
  }

  /** Give each slide its own travel speed for a sense of depth */
  createParallax() {
    // Speed multipliers: > 1 faster, < 1 slower
    const speeds = [1.3, 0.8, 1.15, 0.7, 1.25, 0.85];

    this.parallax = gsap.utils.toArray(".gallery__slide").map((slide, i) => ({
      el: slide,
      factor: speeds[i % speeds.length] - 1,
      offset: 0,
      visible: false,
    }));

    // Scatter the resting positions too
    this.applyParallax();
  }

  /** Offset each slide by its speed factor, report viewport enters/leaves */
  applyParallax(immediate = false) {
    const changes = [];

    this.parallax.forEach((item) => {
      const rect = item.el.getBoundingClientRect();

      // The slide's position without our offset
      const loopTop = rect.top - item.offset;

      // Offset by the speed factor; zero at the wrap point
      item.offset = item.factor * (loopTop + rect.height);
      gsap.set(item.el, { y: item.offset });

      // Check visibility from the final position
      const top = loopTop + item.offset;
      const visible = top < window.innerHeight && top + rect.height > 0;

      // Collect the slides that entered or left
      if (visible !== item.visible) {
        item.visible = visible;
        changes.push({ el: item.el, visible, top });
      }
    });

    if (changes.length) this.onToggle?.(changes, immediate);
  }

  /** Create the eased playhead that smooths scroll input into loop time */
  createScrub() {
    // Proxy object standing in for the scroll position
    this.playhead = { time: 0 };

    // Eases the playhead toward the latest scroll target
    this.scrub = gsap.to(this.playhead, {
      time: 0,
      duration: 0.75,
      ease: "power3.out",
      paused: true,
      onUpdate: () => {
        this.loop.time(this.wrap(this.playhead.time));
        this.applyParallax();
      },
    });
  }

  /** Listen for wheel and touch input */
  createObserver() {
    this.observer = Observer.create({
      target: window,
      type: "wheel,touch",
      preventDefault: true,
      onChange: (self) => {
        this.scroll(self);
      },
    });
  }

  /** Rebuild the loop when the viewport size settles */
  resize() {
    let id;

    window.addEventListener("resize", () => {
      clearTimeout(id);
      id = setTimeout(() => {
        this.rebuild();
      }, 200);
    });
  }

  /** Move the scrub target by the scrolled distance */
  scroll({ deltaX, deltaY }) {
    if (!this.enabled()) return;

    // Swipes (x or y) all drive the gallery
    const delta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;

    // Slides travel 100px per playhead second, so px / 100 gives time
    this.scrub.vars.time += delta / 100;
    this.scrub.invalidate().restart();
  }

  /** Freeze the inertia in place so a transition can take over */
  freeze() {
    this.scrub.pause();

    // Sync the target to where we stopped, so the next scroll ramps from here
    this.scrub.vars.time = this.playhead.time;
    this.scrub.invalidate();
  }

  /** Hand the gallery over to a transition */
  stop() {
    this.observer.disable();

    this.freeze();
  }

  /** Take the gallery back once a transition has finished with it */
  start() {
    this.observer.enable();
  }

  /** Re-measure and rebuild the loop, preserving the current position */
  rebuild() {
    // 0 to 1 progress
    const progress = this.loop.progress();

    // Drop the old timeline and its transforms; the stagger lives in the CSS
    this.freeze();
    this.loop.kill();
    gsap.set(".gallery__slide", { clearProps: "transform" });

    // Re-measure the new viewport size and restore the position
    this.createLoop();
    this.loop.progress(progress, true);

    // Re-measured rather than travelled, so the reveals snap, not replay
    this.parallax.forEach((item) => (item.offset = 0));
    this.applyParallax(true);

    // Re-sync the scrub to the rebuilt loop's timing
    this.playhead.time = this.loop.time();
    this.scrub.vars.time = this.playhead.time;
    this.scrub.invalidate();
  }
}

import { gsap } from "gsap";
import { Flip } from "gsap/Flip";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(Flip, SplitText);

/** Image-to-content transition */
export default class Transition {
  constructor({ onClose } = {}) {
    // Called once the gallery is free again
    this.onClose = onClose;

    // Fixed overlay holding the preview image and the content column
    this.content = document.querySelector(".content");

    // Figure the clicked image morphs into
    this.preview = document.querySelector(".content__preview-img");
    this.previewImg = this.preview.querySelector("img");

    // One content group per slide, matched by data-index
    this.groups = gsap.utils.toArray(".content__group");
    this.slides = gsap.utils.toArray(".gallery__slide");

    // Current active slide
    this.activeSlide = null;

    // Transition timeline
    this.tl = null;

    // SplitText instance for the active content
    this.split = null;

    // Transition state = closed | opening | open | closing
    this.state = "closed";

    // The preview's Flip identity
    this.preview.dataset.flipId = "preview";
  }

  /** Animate to preview */
  async open(slide, index) {
    if (this.state !== "closed") return;
    this.state = "opening";
    this.activeSlide = slide;

    await this.fillContent(slide, index);

    // A close() landing while the preview decoded has already reset us
    if (this.state !== "opening") return;

    const { wrapper, caption, others } = this.parts();
    wrapper.dataset.flipId = "preview";

    // Capture the thumbnail's bounds before the layout changes
    const state = Flip.getState(wrapper);

    // Show the detail layout and hide the thumbnail, killing its reveal tween
    gsap.set(this.content, { display: "block" });
    gsap.killTweensOf(wrapper);
    gsap.set(wrapper, { autoAlpha: 0 });

    // Split the text into lines and characters
    this.split = new SplitText(".content__back, .content__group.active > *", {
      type: "lines,chars",
      charsClass: "char",
    });

    this.tl = gsap
      .timeline({
        onComplete: () => (this.state = "open"),

        // Fires when a cancelled open finishes rewinding
        onReverseComplete: () => this.reset(),
      })

      // Fade out the other slides and the caption
      .to(others, { autoAlpha: 0, duration: 0.5, ease: "power2.out" }, 0)
      .to(caption, { autoAlpha: 0, duration: 0.3, ease: "power2.out" }, 0)

      // Morph the selected image
      .add(
        Flip.from(state, {
          targets: this.preview,
          duration: 1.2,
          ease: "power4.inOut",
          absolute: true,
        }),
        0,
      )
      .to(this.previewImg, { scale: 1, duration: 1.2, ease: "power4.inOut" }, 0);

    // Fade the text in character by character, one line after another
    this.split.lines.forEach((line, i) => {
      this.tl.fromTo(
        line.querySelectorAll(".char"),
        { autoAlpha: 0 },
        {
          autoAlpha: 1,
          duration: 1,
          ease: "power3.out",
          stagger: 0.01,
        },
        // Preview delay + line index * stagger delay
        0.8 + i * 0.06,
      );
    });
  }

  /** Animate the preview back into its slide */
  close() {
    // Close mid-animation
    if (this.state === "opening") {
      this.state = "closing";

      // Still waiting on the decode, so there is no timeline to rewind
      if (!this.tl) {
        this.reset();
        return;
      }

      this.tl.reverse();
      return;
    }

    if (this.state !== "open") return;
    this.state = "closing";

    const { wrapper, caption, others } = this.parts();

    this.tl = gsap
      .timeline({ onComplete: () => this.reset() })
      // Fade the text out line by line
      .to(this.split.lines, { autoAlpha: 0, duration: 0.4, stagger: 0.04, ease: "power1.out" }, 0)

      // Morph the preview back into the thumbnail's bounds
      .add(
        Flip.fit(this.preview, wrapper, {
          duration: 1,
          ease: "power3.inOut",
          absolute: true,
        }),
        0,
      )
      .to(this.previewImg, { scale: 1.2, duration: 1, ease: "power3.inOut" }, 0)

      // Fade the other slides and caption back in
      .to(others, { autoAlpha: 1, duration: 0.5, ease: "power2.out" }, 0.5)
      .to(caption, { autoAlpha: 1, duration: 0.4, ease: "power2.out" }, 0.6);
  }

  /** Copy the clicked image into the preview and activate its content group */
  async fillContent(slide, index) {
    const img = slide.querySelector(".gallery__img");

    // Same src as the thumbnail
    this.previewImg.src = img.src;
    this.previewImg.alt = img.alt;

    this.groups.forEach((group) =>
      group.classList.toggle("active", Number(group.dataset.index) === index),
    );

    // Undecoded, the preview paints blank for the first frames of the morph
    try {
      await this.previewImg.decode();
    } catch {
      // Rejects if the src is swapped mid-flight; the transition still runs
    }
  }

  /** Collect the pieces of the active slide the animations need */
  parts() {
    const slide = this.activeSlide;

    return {
      // Flip target
      wrapper: slide.querySelector(".gallery__img-wrapper"),

      // Title under the image
      caption: slide.querySelector("figcaption"),

      // Other slide items
      others: this.slides.filter((s) => s !== slide),
    };
  }

  /** Restore the DOM */
  reset() {
    const { wrapper } = this.parts();

    // The thumbnail only carries the Flip id while its slide is expanded
    delete wrapper.dataset.flipId;

    // Revert split
    this.split?.revert();
    this.split = null;

    // Hide the overlay and clear style the animations left
    gsap.set(this.content, { display: "none" });
    gsap.set(this.preview, { clearProps: "all" });
    gsap.set(this.previewImg, { clearProps: "all" });
    gsap.set(wrapper, { clearProps: "all" });

    this.activeSlide = null;
    this.tl = null;
    this.state = "closed";

    this.onClose?.();
  }
}

import imagesLoaded from "imagesloaded";

import Reveal from "./Reveal.js";
import Slider from "./Slider.js";
import Transition from "./Transition.js";

imagesLoaded(document.body, () => {
  document.body.classList.remove("loading");
  init();
});

function init() {
  // Image-to-content transition; hands the gallery back when it is done
  const transition = new Transition({ onClose: () => slider.start() });

  // Slide reveals
  const reveal = new Reveal();

  // Infinite slider
  const slider = new Slider({
    enabled: () => transition.state === "closed",
    onToggle: (changes) => reveal.toggle(changes),
  });

  // Gallery slides
  const slides = [...document.querySelectorAll(".gallery__slide")];

  slides.forEach((slide, index) => {
    slide.setAttribute("tabindex", "0");
    slide.setAttribute("role", "button");

    // Only give up the gallery if the transition is going to hand it back
    const open = () => {
      if (transition.state !== "closed") return;

      slider.stop();
      transition.open(slide, index);
    };

    slide.addEventListener("click", open);

    slide.addEventListener("keydown", (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        open();
      }
    });
  });

  document.querySelector(".content__back").addEventListener("click", () => transition.close());

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") transition.close();
  });
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 12px;
  --color-text: #9b9b9b;
  --color-bg: #eaeeed;
  --color-link: #9b9b9b;
  --color-link-hover: #000000;
  --color-desc: #9b9b9b;
  --page-padding: 1.5rem;
}

/* The slider drives the gallery, so the document itself never scrolls */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: "host-grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
  touch-action: none;
}

@media (scripting: enabled) {
  .loading {
    &::before,
    &::after {
      content: "";
      position: fixed;
      z-index: 10000;
    }

    &::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-bg);
    }

    &::after {
      top: 50%;
      left: 50%;
      width: 100px;
      height: 1px;
      margin: 0 0 0 -50px;
      background: var(--color-link);
      animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
    }
  }
}

@keyframes loaderAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 50%;
  }

  50% {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid red;
      background: transparent;
    }
  }
}

.frame {
  padding: var(--page-padding);
  display: grid;
  z-index: 100;
  position: relative;
  gap: 1rem;
  pointer-events: none;
  justify-items: start;
  grid-template-columns: 100%;
  grid-template-areas:
    "title"
    "links"
    "tags"
    "sponsor";

  #cdawrap {
    justify-self: start;
    grid-area: sponsor;
  }

  a,
  button {
    pointer-events: auto;
  }

  .frame__title {
    grid-area: title;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
  }

  .frame__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__links {
    grid-area: links;
  }

  @media screen and (min-width: 53em) {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas:
      "title ... links"
      "tags tags sponsor";

    .frame__tags {
      align-self: end;
    }

    .frame__links,
    #cdawrap {
      justify-self: end;
      text-align: right;
      max-width: 300px;
    }
  }
}

/* Gallery */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12vh;
  width: 100%;
  padding-top: 14vh;
}

.gallery__slide {
  flex-shrink: 0;
  transform: translateX(var(--stagger, 0vw));
  cursor: pointer;
  outline: none;
  padding: 0;
}

.gallery__slide:nth-child(1) {
  --stagger: -24vw;
  --img-w: 290px;
}
.gallery__slide:nth-child(2) {
  --stagger: 14vw;
  --img-w: 330px;
}
.gallery__slide:nth-child(3) {
  --stagger: -18vw;
  --img-w: 270px;
}
.gallery__slide:nth-child(4) {
  --stagger: 22vw;
  --img-w: 450px;
}
.gallery__slide:nth-child(5) {
  --stagger: -26vw;
  --img-w: 300px;
}
.gallery__slide:nth-child(6) {
  --stagger: 28vw;
  --img-w: 150px;
}
.gallery__slide:nth-child(7) {
  --stagger: -20vw;
  --img-w: 230px;
}
.gallery__slide:nth-child(8) {
  --stagger: 8vw;
  --img-w: 460px;
}
.gallery__slide:nth-child(9) {
  --stagger: -12vw;
  --img-w: 270px;
}
.gallery__slide:nth-child(10) {
  --stagger: 15vw;
  --img-w: 250px;
}
.gallery__slide:nth-child(11) {
  --stagger: -24vw;
  --img-w: 390px;
}
.gallery__slide:nth-child(12) {
  --stagger: 26vw;
  --img-w: 160px;
}
.gallery__slide:nth-child(13) {
  --stagger: -16vw;
  --img-w: 210px;
}

.gallery__slide:nth-child(14) {
  --stagger: 24vw;
  --img-w: 280px;
}

.gallery__slide:nth-child(15) {
  --stagger: -28vw;
  --img-w: 175px;
}

.gallery__slide:nth-child(16) {
  --stagger: 18vw;
  --img-w: 240px;
}

.gallery__slide:nth-child(17) {
  --stagger: -10vw;
  --img-w: 310px;
}

.gallery__slide figcaption {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-desc);
}

.gallery__img-wrapper {
  position: relative;
  margin: 0;
  width: var(--img-w, 200px);
  height: auto;
  aspect-ratio: 0.8;
  overflow: hidden;

  pointer-events: none;
  user-select: none;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
  }
}

/**
 * Content: Fixed popup overlay
 */
.content {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/**
 * Content: Clicked image lands here
 */
.content__preview-img {
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  height: 100vh;
  aspect-ratio: 0.8;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
  }
}

.content__group-list {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-inline: calc(80vh + 1.5vw) var(--page-padding);
  padding-block: var(--page-padding);
}

.content__back {
  font-weight: inherit;
  font-size: inherit;
  align-self: flex-start;
  border: none;
  background: none;
  color: #111;
  cursor: pointer;
  padding: 0;
  line-height: inherit;
}

.content__group {
  display: none;
}

.content__group.active {
  display: block;
}

.content__title {
  justify-self: end;
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 10vw, 6rem);
  line-height: 1;
  margin-bottom: 3rem;
  margin-top: 40vh;
  color: #141414;
}

.content__title:focus {
  outline: none;
}

.content__description {
  justify-self: end;
  margin-right: 10vw;
  max-width: 50ch;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

import { gsap } from "gsap";

/** Animate items along the y-axis in a loop */
export default function verticalLoop(items, config) {
  items = gsap.utils.toArray(items);
  config = config || {};

  // Endless timeline
  const tl = gsap.timeline({
    repeat: config.repeat,
    paused: config.paused,
    defaults: { ease: "none" },
    onReverseComplete: () => {
      // Keep the playhead in range when playing backwards past zero
      tl.totalTime(tl.rawTime() + tl.duration() * 100);
    },
  });

  const length = items.length;

  // Measure from the top so any top padding is travelled before a wrap
  const startY = 0;

  // Height of each item, in px
  const heights = [];

  // Starting y of each item, relative to its height
  const yPercents = [];

  // Travel speed: speed 1 = 100px per second
  const pixelsPerSecond = (config.speed || 1) * 100;

  // Round yPercent values so items land on whole pixels
  const snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1);

  // Measure each item and convert its y into a height-relative yPercent
  gsap.set(items, {
    yPercent: (i, el) => {
      const h = (heights[i] = parseFloat(gsap.getProperty(el, "height", "px")));
      yPercents[i] = snap(
        (parseFloat(gsap.getProperty(el, "y", "px")) / h) * 100 + gsap.getProperty(el, "yPercent"),
      );
      return yPercents[i];
    },
  });
  gsap.set(items, { y: 0 });

  // Full container length, including the spacing at the wrap seam
  const totalHeight =
    items[length - 1].offsetTop +
    (yPercents[length - 1] / 100) * heights[length - 1] -
    startY +
    items[length - 1].offsetHeight * gsap.getProperty(items[length - 1], "scaleY") +
    (parseFloat(config.paddingBottom) || 0);

  // Two tweens per item: exit top, then re-enter from the bottom
  for (let i = 0; i < length; i++) {
    const item = items[i];

    // Current y offset in px
    const curY = (yPercents[i] / 100) * heights[i];

    // Distance to the container's top edge
    const distanceToStart = item.offsetTop + curY - startY;

    // Distance until fully off-screen top
    const distanceToLoop = distanceToStart + heights[i] * gsap.getProperty(item, "scaleY");

    // Travel up until fully off-screen
    tl.to(
      item,
      {
        yPercent: snap(((curY - distanceToLoop) / heights[i]) * 100),
        duration: distanceToLoop / pixelsPerSecond,
      },
      0,
    ).fromTo(
      // Then re-enter from the bottom end of the container
      item,
      {
        yPercent: snap(((curY - distanceToLoop + totalHeight) / heights[i]) * 100),
      },
      {
        yPercent: yPercents[i],
        duration: (totalHeight - distanceToLoop) / pixelsPerSecond,
        immediateRender: false,
      },
      distanceToLoop / pixelsPerSecond,
    );
  }

  // Pre-render every tween to avoid a first-frame jump
  tl.progress(1, true).progress(0, true);

  return tl;
}

Building an Infinite GSAP Scroll Gallery with Parallax and Flip Transitions
Original author: Surya Aditya
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.

README.md
## Credits

- Images generated with Midjourney.


## License

[MIT](LICENSE)

GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.

Standard "No Charge" GSAP License

 I. DEFINITIONS

 “GSAP License” means the terms and conditions of this GSAP Software License Agreement.

 "GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.

 "Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).

 "Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.

 "Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).

 II. GRANT OF LICENSE

 Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.

 III. RESTRICTIONS

 You may not:

 Use any GSAP Products for any Prohibited Uses without prior written consent;

 Reverse engineer any GSAP Products for the purpose of creating Competitive Products;

 Remove or alter any proprietary notices or branding from GSAP Products.

 IV. OWNERSHIP AND INTELLECTUAL PROPERTY

 All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.

 V. TERMINATION

 Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.

 VI. MISCELLANEOUS PROVISIONS

 General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.

 Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).

 No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.

 FAQ

 Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
 Absolutely! AI-generated code is not a "Prohibited Use".

 What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
 We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!

 Can I really use GSAP in commercial projects without paying anything?
 Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚

 Effective date: April 30, 2025

 Last modified date: May 30, 2025

 Copyright (©) 2025, Webflow


ev-emitter@2.1.2 — LICENSE.md
Copyright (c) 2016-2021 [David DeSandro](https://desandro.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


imagesloaded@5.0.0 — LICENSE.md
Copyright (c) 2011-2022 [David DeSandro](https://desandro.com) and [contributors](https://github.com/desandro/imagesloaded/graphs/contributors)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.