From SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins

<!--------- Osmo [https://osmo.supply/] --------->

<section class="section-resource">
 <div class="drop-wrapper">
 <div class="drop-section">
 <h1 data-drop-text="" class="drop-heading">This is just a<span data-drop-img="" class="drop-heading-img is--first"><img loading="lazy" src="https://cdn.prod.website-files.com/681a615bf5a0f1ba3cb1ca38/681a62d0bb34b74d3514ecab_shape-squigle-1.png" alt=""></span>random quote<span data-drop-img="" class="drop-heading-img is--second"><img loading="lazy" src="https://cdn.prod.website-files.com/681a615bf5a0f1ba3cb1ca38/681a62d0bb34b74d3514ecad_shape-squigle-2.png" alt=""></span>we used</h1>
 </div>
 <div class="drop-section">
 <h1 data-drop-text="" class="drop-heading">See how our window acts like<span data-drop-img="" class="drop-heading-img is--third"><img loading="lazy" src="https://cdn.prod.website-files.com/681a615bf5a0f1ba3cb1ca38/681a62d0bb34b74d3514ecaf_shape-squigle-3.png" alt=""></span> a roof?</h1>
 </div>
 <div class="drop-section">
 <h1 data-drop-text="" class="drop-heading">So much fun!</h1>
 </div>
 </div>
</section>

<div class="osmo-credits">
 <p class="osmo-credits__p">Resource by <a target="_blank" href="https://www.osmo.supply?utm_source=codepen&utm_medium=pen&utm_campaign=falling-text-with-gravity" class="osmo-credits__p-a">Osmo</a>
 </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Physics2DPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

// ------- Osmo [https://osmo.supply/] ------- //

gsap.registerPlugin(ScrollTrigger, SplitText, Physics2DPlugin);

function initFallingTextGravity() {
 new SplitText("[data-drop-text]", {
 type: "lines, chars",
 autoSplit: true, // resplit split if the element resizes and it's split by lines
 linesClass: "line",
 onSplit(self) {
 // use a context to collect up all the animations
 let ctx = gsap.context(() => {
 self.lines.forEach((line) => { // loop around the lines
 // only one timeline per line rather than one per element
 gsap
 .timeline({
 scrollTrigger: {
 once: true, // only fire once
 trigger: line, // use the line as a trigger
 start: "top top-=10" // adjust offset as you see fit
 }
 })
 .to(line.children, { // target the children
 duration: "random(1.5, 3)", // Use GSAP utils for randomized values
 physics2D: {
 velocity: "random(500, 1000)",
 angle: 90,
 gravity: 3000
 },
 rotation: "random(-90, 90)",
 ease: "none"
 })
 .to(
 line.children,
 {
 autoAlpha: 0,
 duration: 0.2
 },
 "-=.2"
 );
 });
 });

 return ctx; // return our animations so GSAP can clean them up when onSplit fires
 }
 });
}

// Initialize Falling Text with Gravity
document.addEventListener("DOMContentLoaded", () => {
 initFallingTextGravity();
});

/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
 background-color: #340824;
 color: var(--color-light);
 font-size: 1vw;
 margin: 0;
 padding: 0;
 overscroll-behavior: none;
 min-height: 100%;
 font-family: PP Neue Montreal, Arial, sans-serif;
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
 2 0,
 auto;
}

a,
button {
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
 12 0,
 pointer;
}

.section-resource {
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 display: flex;
 overflow: clip;
}

.drop-wrapper {
 width: 100%;
 min-height: 350vh;
}

.drop-section {
 justify-content: center;
 align-items: center;
 width: 100%;
 min-height: 100vh;
 display: flex;
 position: relative;
}

.drop-heading {
 text-align: center;
 max-width: 40rem;
 margin-top: 0;
 margin-bottom: 0;
 font-size: 4rem;
 font-weight: 500;
 line-height: 1;
}

.drop-heading-img {
 z-index: 2;
 width: 1.2em;
 display: inline-block;
 position: relative;
}

.drop-heading-img img {
 width: 100%;
 max-width: 100%;
}

.drop-heading-img.is--first {
 transform: rotate(-20deg)translate(.15em, -.2em);
}

.drop-heading-img.is--second {
 transform: translate(-.1em, 0.2em)rotate(10deg);
}

.drop-heading-img.is--third {
 margin-left: -.1em;
 margin-right: -.1em;
 margin-top: -.2em;
 transform: translate(-.05em, .1em)rotate(50deg);
}

[data-drop-text] .line { 
 display: block;
}

.osmo-credits {
 z-index: 999;
 pointer-events: none;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 4em;
 padding: 1em;
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
}

.osmo-credits__p {
 pointer-events: auto;
 color: #efeeec80;
 text-align: center;
 margin: 0;
 font-family: PP Neue Montreal, Arial, sans-serif;
 font-size: 1.125em;
 font-weight: 500;
 line-height: 1.3;
}

.osmo-credits__p-a {
 color: #efeeec;
}

@font-face {
 font-family: 'PP Neue Montreal';
 src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

Falling Text with Gravity (Physics2D)
Original CodePen author account: osmosupply
Article author: Osmo
Code license: MIT under CodePen's verified public Pen policy.
Preserve the MIT notice and separate dependency/media credits.

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

/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

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

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

<!--------- Osmo [https://osmo.supply/] --------->
<section class="section-resource">
 <div class="dots-wrap">
 <div data-dots-container-init="" class="dots-container">
 <div class="dot"></div>
 </div>
 </div>
 <a href="https://osmo.supply/" target="_blank" class="osmo-icon__link w-inline-block">
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 160" fill="none" class="osmo-icon-svg"><path d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z" fill="currentColor"></path></svg>
 </a>
</section>
<div class="osmo-credits">
 <p class="osmo-credits__p">Resource by <a target="_blank" href="https://www.osmo.supply?utm_source=codepen&utm_medium=pen&utm_campaign=glowing-interactive-dots-grid" class="osmo-credits__p-a">Osmo</a>
 </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/InertiaPlugin.min.js"></script>

// ------- Osmo [https://osmo.supply/] ------- //

gsap.registerPlugin(InertiaPlugin);

function initGlowingInteractiveDotsGrid() {
 document.querySelectorAll('[data-dots-container-init]').forEach(container => {
 const colors = { base: "#245E51", active: "#A8FF51" };
 const threshold = 150;
 const speedThreshold = 100;
 const shockRadius = 250;
 const shockPower = 5;
 const maxSpeed = 5000;
 const centerHole = true;

 let dots = [];
 let dotCenters = [];

 function buildGrid() {
 container.innerHTML = "";
 dots = [];
 dotCenters = [];

 const style = getComputedStyle(container);
 const dotPx = parseFloat(style.fontSize);
 const gapPx = dotPx * 2;
 const contW = container.clientWidth;
 const contH = container.clientHeight;

 const cols = Math.floor((contW + gapPx) / (dotPx + gapPx));
 const rows = Math.floor((contH + gapPx) / (dotPx + gapPx));
 const total = cols * rows;

 const holeCols = centerHole ? (cols % 2 === 0 ? 4 : 5) : 0;
 const holeRows = centerHole ? (rows % 2 === 0 ? 4 : 5) : 0;
 const startCol = (cols - holeCols) / 2;
 const startRow = (rows - holeRows) / 2;

 for (let i = 0; i < total; i++) {
 const row = Math.floor(i / cols);
 const col = i % cols;
 const isHole = centerHole &&
 row >= startRow && row < startRow + holeRows &&
 col >= startCol && col < startCol + holeCols;

 const d = document.createElement("div");
 d.classList.add("dot");

 if (isHole) {
 d.style.visibility = "hidden";
 d._isHole = true;
 } else {
 gsap.set(d, { x: 0, y: 0, backgroundColor: colors.base });
 d._inertiaApplied = false;
 }

 container.appendChild(d);
 dots.push(d);
 }

 requestAnimationFrame(() => {
 dotCenters = dots
 .filter(d => !d._isHole)
 .map(d => {
 const r = d.getBoundingClientRect();
 return {
 el: d,
 x: r.left + window.scrollX + r.width / 2,
 y: r.top + window.scrollY + r.height / 2
 };
 });
 });
 }

 window.addEventListener("resize", buildGrid);
 buildGrid();

 let lastTime = 0, lastX = 0, lastY = 0;

 window.addEventListener("mousemove", e => {
 const now = performance.now();
 const dt = now - lastTime || 16;
 let dx = e.pageX - lastX;
 let dy = e.pageY - lastY;
 let vx = dx / dt * 1000;
 let vy = dy / dt * 1000;
 let speed = Math.hypot(vx, vy);

 if (speed > maxSpeed) {
 const scale = maxSpeed / speed;
 vx *= scale; vy *= scale; speed = maxSpeed;
 }

 lastTime = now;
 lastX = e.pageX;
 lastY = e.pageY;

 requestAnimationFrame(() => {
 dotCenters.forEach(({ el, x, y }) => {
 const dist = Math.hypot(x - e.pageX, y - e.pageY);
 const t = Math.max(0, 1 - dist / threshold);
 const col = gsap.utils.interpolate(colors.base, colors.active, t);
 gsap.set(el, { backgroundColor: col });

 if (speed > speedThreshold && dist < threshold && !el._inertiaApplied) {
 el._inertiaApplied = true;
 const pushX = (x - e.pageX) + vx * 0.005;
 const pushY = (y - e.pageY) + vy * 0.005;

 gsap.to(el, {
 inertia: { x: pushX, y: pushY, resistance: 750 },
 onComplete() {
 gsap.to(el, {
 x: 0,
 y: 0,
 duration: 1.5,
 ease: "elastic.out(1,0.75)"
 });
 el._inertiaApplied = false;
 }
 });
 }
 });
 });
 });

 window.addEventListener("click", e => {
 dotCenters.forEach(({ el, x, y }) => {
 const dist = Math.hypot(x - e.pageX, y - e.pageY);
 if (dist < shockRadius && !el._inertiaApplied) {
 el._inertiaApplied = true;
 const falloff = Math.max(0, 1 - dist / shockRadius);
 const pushX = (x - e.pageX) * shockPower * falloff;
 const pushY = (y - e.pageY) * shockPower * falloff;

 gsap.to(el, {
 inertia: { x: pushX, y: pushY, resistance: 750 },
 onComplete() {
 gsap.to(el, {
 x: 0,
 y: 0,
 duration: 1.5,
 ease: "elastic.out(1,0.75)"
 });
 el._inertiaApplied = false;
 }
 });
 }
 });
 });
 });
}

// Initialize Glowing Interactive Dots Grid
document.addEventListener('DOMContentLoaded', function() {
 initGlowingInteractiveDotsGrid();
});

/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
 background-color: #08342a;
 color: var(--color-light);
 font-size: 1vw;
 margin: 0;
 padding: 0;
 overscroll-behavior: none;
 min-height: 100%;
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
 2 0,
 auto;
}

a,
button {
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
 12 0,
 pointer;
}

.section-resource {
 padding: 4em;
 justify-content: center;
 align-items: center;
 height: 100svh;
 display: flex;
 position: relative;
}

.osmo-icon__link {
 color: currentColor;
 text-decoration: none;
 position: absolute;
}

.osmo-icon-svg {
 width: 10em;
}

.dots-wrap {
 width: 100%;
 height: 100%;
 position: relative;
}

.dots-container {
 grid-column-gap: 2em;
 grid-row-gap: 2em;
 pointer-events: none;
 flex-flow: wrap;
 grid-template-rows: auto;
 grid-template-columns: 1fr;
 grid-auto-columns: 1fr;
 justify-content: center;
 align-items: center;
 display: flex;
 position: absolute;
 inset: 0em;
}

.dot {
 will-change: transform, background-color;
 transform-origin: center;
 background-color: #245e51;
 border-radius: 50%;
 width: 1em;
 height: 1em;
 position: relative;
 transform: translate(0);
}

.osmo-credits {
 z-index: 999;
 pointer-events: none;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 4em;
 padding: 1em;
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
}

.osmo-credits__p {
 pointer-events: auto;
 color: #efeeec80;
 text-align: center;
 margin: 0;
 font-family: PP Neue Montreal, Arial, sans-serif;
 font-size: 1.125em;
 font-weight: 500;
 line-height: 1.3;
}

.osmo-credits__p-a {
 color: #efeeec;
}

@font-face {
 font-family: 'PP Neue Montreal';
 src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

Glowing Interactive Dots Grid (GSAP Inertia)
Original CodePen author account: osmosupply
Article author: Osmo
Code license: MIT under CodePen's verified public Pen policy.
Preserve the MIT notice and separate dependency/media credits.

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

/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

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

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

<!--------- Osmo [https://osmo.supply/] --------->

<section class="cloneable">
 <a data-draw-line="" href="#" class="text-draw w-inline-block">
 <p class="text-draw__p">Branding</p>
 <div data-draw-line-box="" class="text-draw__box"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 310 41" fill="none" preserveaspectratio="none" class="text-draw__box-svg">
 <path d="M17.0039 33.582C32.2307 33.7406 47.4552 33.7271 62.676 33.7113C67.3044 33.7064 96.546 33.9549 104.728 32.9769C113.615 31.9146 104.516 29.2022 102.022 28.1821C89.9573 23.2459 77.3751 19.9248 65.0451 15.9546C57.8987 13.6536 37.2813 9.3934 44.2314 7.00157C50.9667 4.68363 64.2873 6.71856 70.4249 6.86582C105.866 7.71618 141.306 8.48751 176.75 9.49827C217.874 10.671 258.906 11.9547 300 15.3886" stroke="currentColor" stroke-width="10" stroke-linecap="round"></path>
 </svg></div>
 </a>
 <a data-draw-line="" href="#" class="text-draw w-inline-block">
 <p class="text-draw__p">Design</p>
 <div data-draw-line-box="" class="text-draw__box"></div>
 </a>
 <a data-draw-line="" href="#" class="text-draw w-inline-block">
 <p class="text-draw__p">Development</p>
 <div data-draw-line-box="" class="text-draw__box"></div>
 </a>
</section>
<div class="osmo-credits">
 <p class="osmo-credits__p">Resource by <a target="_blank" href="https://www.osmo.supply?utm_source=codepen&utm_medium=pen&utm_campaign=draw-random-underline" class="osmo-credits__p-a">Osmo</a>
 </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/DrawSVGPlugin.min.js"></script>

// ------- Osmo [https://osmo.supply/] ------- //

gsap.registerPlugin(DrawSVGPlugin);

function initDrawRandomUnderline() {
 const svgVariants = [
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 20.9999C26.7762 16.2245 49.5532 11.5572 71.7979 14.6666C84.9553 16.5057 97.0392 21.8432 109.987 24.3888C116.413 25.6523 123.012 25.5143 129.042 22.6388C135.981 19.3303 142.586 15.1422 150.092 13.3333C156.799 11.7168 161.702 14.6225 167.887 16.8333C181.562 21.7212 194.975 22.6234 209.252 21.3888C224.678 20.0548 239.912 17.991 255.42 18.3055C272.027 18.6422 288.409 18.867 305 17.9999" stroke="currentColor" stroke-width="10" stroke-linecap="round"/></svg>`,
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 24.2592C26.233 20.2879 47.7083 16.9968 69.135 13.8421C98.0469 9.5853 128.407 4.02322 158.059 5.14674C172.583 5.69708 187.686 8.66104 201.598 11.9696C207.232 13.3093 215.437 14.9471 220.137 18.3619C224.401 21.4596 220.737 25.6575 217.184 27.6168C208.309 32.5097 197.199 34.281 186.698 34.8486C183.159 35.0399 147.197 36.2657 155.105 26.5837C158.11 22.9053 162.993 20.6229 167.764 18.7924C178.386 14.7164 190.115 12.1115 201.624 10.3984C218.367 7.90626 235.528 7.06127 252.521 7.49276C258.455 7.64343 264.389 7.92791 270.295 8.41825C280.321 9.25056 296 10.8932 305 13.0242" stroke="#E55050" stroke-width="10" stroke-linecap="round"/></svg>`,
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 29.5014C9.61174 24.4515 12.9521 17.9873 20.9532 17.5292C23.7742 17.3676 27.0987 17.7897 29.6575 19.0014C33.2644 20.7093 35.6481 24.0004 39.4178 25.5014C48.3911 29.0744 55.7503 25.7731 63.3048 21.0292C67.9902 18.0869 73.7668 16.1366 79.3721 17.8903C85.1682 19.7036 88.2173 26.2464 94.4121 27.2514C102.584 28.5771 107.023 25.5064 113.276 20.6125C119.927 15.4067 128.83 12.3333 137.249 15.0014C141.418 16.3225 143.116 18.7528 146.581 21.0014C149.621 22.9736 152.78 23.6197 156.284 24.2514C165.142 25.8479 172.315 17.5185 179.144 13.5014C184.459 10.3746 191.785 8.74853 195.868 14.5292C199.252 19.3205 205.597 22.9057 211.621 22.5014C215.553 22.2374 220.183 17.8356 222.979 15.5569C225.4 13.5845 227.457 11.1105 230.742 10.5292C232.718 10.1794 234.784 12.9691 236.164 14.0014C238.543 15.7801 240.717 18.4775 243.356 19.8903C249.488 23.1729 255.706 21.2551 261.079 18.0014C266.571 14.6754 270.439 11.5202 277.146 13.6125C280.725 14.7289 283.221 17.209 286.393 19.0014C292.321 22.3517 298.255 22.5014 305 22.5014" stroke="#E55050" stroke-width="10" stroke-linecap="round"/></svg>`,
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0039 32.6826C32.2307 32.8412 47.4552 32.8277 62.676 32.8118C67.3044 32.807 96.546 33.0555 104.728 32.0775C113.615 31.0152 104.516 28.3028 102.022 27.2826C89.9573 22.3465 77.3751 19.0254 65.0451 15.0552C57.8987 12.7542 37.2813 8.49399 44.2314 6.10216C50.9667 3.78422 64.2873 5.81914 70.4249 5.96641C105.866 6.81677 141.306 7.58809 176.75 8.59886C217.874 9.77162 258.906 11.0553 300 14.4892" stroke="#E55050" stroke-width="10" stroke-linecap="round"/></svg>`,
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.99805 20.9998C65.6267 17.4649 126.268 13.845 187.208 12.8887C226.483 12.2723 265.751 13.2796 304.998 13.9998" stroke="currentColor" stroke-width="10" stroke-linecap="round"/></svg>`,
 `<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 29.8857C52.3147 26.9322 99.4329 21.6611 146.503 17.1765C151.753 16.6763 157.115 15.9505 162.415 15.6551C163.28 15.6069 165.074 15.4123 164.383 16.4275C161.704 20.3627 157.134 23.7551 153.95 27.4983C153.209 28.3702 148.194 33.4751 150.669 34.6605C153.638 36.0819 163.621 32.6063 165.039 32.2029C178.55 28.3608 191.49 23.5968 204.869 19.5404C231.903 11.3436 259.347 5.83254 288.793 5.12258C294.094 4.99476 299.722 4.82265 305 5.45025" stroke="#E55050" stroke-width="10" stroke-linecap="round"/></svg>`
 ];
 // Add attributes to <svg> elements
 function decorateSVG(svgEl) {
 svgEl.setAttribute('class', 'text-draw__box-svg');
 svgEl.setAttribute('preserveAspectRatio', 'none');
 svgEl.querySelectorAll('path').forEach(path => {
 path.setAttribute('stroke', 'currentColor');
 });
 }
 let nextIndex = null;
 document.querySelectorAll('[data-draw-line]').forEach(container => {
 const box = container.querySelector('[data-draw-line-box]');
 if (!box) return;
 let enterTween = null;
 let leaveTween = null;
 container.addEventListener('mouseenter', () => {
 // Don't restart if still playing
 if (enterTween && enterTween.isActive()) return;
 if (leaveTween && leaveTween.isActive()) leaveTween.kill();
 // Random Start
 if (nextIndex === null) {
 nextIndex = Math.floor(Math.random() * svgVariants.length);
 }
 // Animate Draw
 box.innerHTML = svgVariants[nextIndex];
 const svg = box.querySelector('svg');
 if (svg) {
 decorateSVG(svg);
 const path = svg.querySelector('path');
 if (path) {
 gsap.set(path, { drawSVG: '0%' });
 enterTween = gsap.to(path, {
 duration: 0.5,
 drawSVG: '100%',
 ease: 'power2.inOut',
 onComplete: () => { enterTween = null; }
 });
 }
 }
 // Advance for next hover across all items
 nextIndex = (nextIndex + 1) % svgVariants.length;
 });
 container.addEventListener('mouseleave', () => {
 const path = box.querySelector('path');
 if (!path) return;
 const playOut = () => {
 // Don't restart if still drawing out
 if (leaveTween && leaveTween.isActive()) return;
 leaveTween = gsap.to(path, {
 duration: 0.5,
 drawSVG: '100% 100%',
 ease: 'power2.inOut',
 onComplete: () => {
 leaveTween = null;
 box.innerHTML = ''; // remove SVG when done
 }
 });
 };
 if (enterTween && enterTween.isActive()) {
 // Wait until draw-in finishes
 enterTween.eventCallback('onComplete', playOut);
 } else {
 playOut();
 }
 });
 });
}
// Initialize Draw Random Underline
document.addEventListener('DOMContentLoaded', function() {
 initDrawRandomUnderline();
});

/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
 background-color: #fefaee;
 font-family: PP Neue Montreal, Arial, sans-serif;
 color: #340824
 font-size: 1vw;
 margin: 0;
 padding: 0;
 overscroll-behavior: none;
 min-height: 100%;
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
 2 0,
 auto;
}

a,
button {
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
 12 0,
 pointer;
}

.cloneable {
 padding: var(--section-padding) var(--container-padding);
 justify-content: center;
 align-items: center;
 min-height: 100svh;
 display: flex;
 position: relative;
}

.text-draw {
 color: #340824;
 margin-left: 1em;
 margin-right: 1em;
 font-size: 3.5vw;
 text-decoration: none;
}

.text-draw__p {
 margin-bottom: 0;
 font-size: 1.5em;
 font-weight: 500;
 line-height: 1.1;
}

.text-draw__box {
 color: #e55050;
 width: 100%;
 height: .625em;
 position: relative;
}

.text-draw__box-svg {
 width: 100%;
 height: 100%;
 position: absolute;
 overflow: visible !important;
}

.osmo-credits {
 z-index: 999;
 pointer-events: none;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 4em;
 padding: 1em;
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
 font-size: 1vw;
}

.osmo-credits__p {
 pointer-events: auto;
 color: rgba(19, 19, 19, 0.5);
 text-align: center;
 margin: 0;
 font-family: PP Neue Montreal, Arial, sans-serif;
 font-size: 1.125em;
 font-weight: 500;
 line-height: 1.3;
}

.osmo-credits__p-a {
 color: #340824;
}

@font-face {
 font-family: 'PP Neue Montreal';
 src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

Draw Random Underline (DrawSVG)
Original CodePen author account: osmosupply
Article author: Osmo
Code license: MIT under CodePen's verified public Pen policy.
Preserve the MIT notice and separate dependency/media credits.

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

/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

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

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

<!--------- Osmo [https://osmo.supply/] --------->

<button data-play-pause="toggle" class="play-pause-button">
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 25" fill="none" class="play-pause-icon">
 <path d="M3.5 5L3.50049 3.9468C3.50049 3.177 4.33382 2.69588 5.00049 3.08078L20.0005 11.741C20.6672 12.1259 20.6672 13.0882 20.0005 13.4731L17.2388 15.1412L17.0055 15.2759M3.50049 8L3.50049 21.2673C3.50049 22.0371 4.33382 22.5182 5.00049 22.1333L14.1192 16.9423L14.4074 16.7759" stroke="currentColor" stroke-width="2" stroke-miterlimit="16" data-play-pause="path" stroke-linecap="round"></path>
 </svg>
</button>

<div class="osmo-credits">
 <p class="osmo-credits__p">Resource by <a target="_blank" href="https://www.osmo.supply?utm_source=codepen&utm_medium=pen&utm_campaign=morphing-play-pause" class="osmo-credits__p-a">Osmo</a>
 </p>
</div>

// ------- Osmo [https://osmo.supply/] ------- //

gsap.registerPlugin(MorphSVGPlugin, Physics2DPlugin);

function initMorphingPlayPauseToggle() {
 const playPath =
 "M3.5 5L3.50049 3.9468C3.50049 3.177 4.33382 2.69588 5.00049 3.08078L20.0005 11.741C20.6672 12.1259 20.6672 13.0882 20.0005 13.4731L17.2388 15.1412L17.0055 15.2759M3.50049 8L3.50049 21.2673C3.50049 22.0371 4.33382 22.5182 5.00049 22.1333L14.1192 16.9423L14.4074 16.7759";
 const pausePath =
 "M15.5004 4.05859V5.0638V5.58691V8.58691V15.5869V19.5869V21.2549M8.5 3.96094V10.3721V17V19L8.5 21";

 const buttonToggle = document.querySelector('[data-play-pause="toggle"]');
 const iconPath = buttonToggle.querySelector('[data-play-pause="path"]');
 let isPlaying = false; // keep track of state to control the morph

 buttonToggle.addEventListener("click", () => {
 gsap.to(iconPath, {
 duration: 0.5,
 morphSVG: {
 type: "rotational",
 map: "complexity", // morphs the shape based on the amount of anchor points, it's fastest!
 shape: isPlaying ? playPath : pausePath // if button is 'playing', morph to pause and vice versa
 },
 ease: "power4.inOut"
 });
 isPlaying = !isPlaying; // control play/pause state again
 });
}

function initConfettiClick() {
 document.addEventListener("click", (event) => {
 // Generate a random number of dots
 const dotCount = gsap.utils.random(15, 30, 1);
 const colors = ["#0ae448", "#abff84", "#fffce1"]; // Define colors once

 for (let i = 0; i < dotCount; i++) {
 // Create a dot element
 const dot = document.createElement("div");
 dot.classList.add("dot");

 // Append the dot to the body
 document.body.appendChild(dot);

 // Set initial position and styles of the dot
 gsap.set(dot, {
 backgroundColor: gsap.utils.random(colors), // Pick a random color
 top: event.clientY, // position dot at coordinates of the click
 left: event.clientX,
 scale: 0 // Start at scale 0
 });

 // Animate the dot with physics2D
 gsap
 .timeline({
 onComplete: () => dot.remove() // Remove the dot after animation
 })
 .to(dot, {
 scale: gsap.utils.random(0.3, 1), // Scale between 0.5 and 1
 duration: 0.3, // Quick pop-in effect
 ease: "power3.out"
 })
 .to(
 dot,
 {
 duration: 2,
 physics2D: {
 velocity: gsap.utils.random(500, 1000), // Random velocity
 angle: gsap.utils.random(0, 360), // Random direction
 gravity: 1500 // Gravity effect
 },
 autoAlpha: 0, // Fade out towards the end
 ease: "none"
 },
 "<"
 ); // Start together with the previous tween
 }
 });
}

// Initialize Functions
document.addEventListener("DOMContentLoaded", () => {
 initMorphingPlayPauseToggle();
 initConfettiClick();
});

/* ------- Osmo [https://osmo.supply/] ------- */

body {
 background-color: #25122d;
 color: #efeeec;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 flex-direction: column;
 overflow: clip;
 font-size: 1vw;
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
 2 0,
 auto;
}

a,
button {
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
 12 0,
 pointer;
}

.play-pause-button {
 background-color: transparent;
 border: none;
 justify-content: center;
 align-items: center;
 width: max(7.5rem, 15vw);
 height: max(7.5rem, 15vw);
 padding: 0;
 display: flex;
 color: currentColor;
}

.play-pause-icon {
 width: 100%;
 height: 100%;
}

.dot {
 position: absolute;
 background-color: #0ae448;
 width: 2vw;
 height: 2vw;
 border-radius: 50%;
 will-change: transform, opacity;
 pointer-events: none;
}

.osmo-credits {
 z-index: 999;
 pointer-events: none;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 4em;
 padding: 1em;
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
}

.osmo-credits__p {
 pointer-events: auto;
 color: #efeeec80;
 text-align: center;
 margin: 0;
 font-family: PP Neue Montreal, Arial, sans-serif;
 font-size: 1.125em;
 font-weight: 500;
 line-height: 1.3;
}

.osmo-credits__p-a {
 color: #efeeec;
}

@font-face {
 font-family: "PP Neue Montreal";
 src: url("https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2")
 format("woff2");
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

Morphing Play/Pause (MorphSVG)
Original CodePen author account: osmosupply
Article author: Osmo
Code license: MIT under CodePen's verified public Pen policy.
Preserve the MIT notice and separate dependency/media credits.

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

/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

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

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

<!--------- Osmo [https://osmo.supply/] --------->
<section class="cloneable">
 <div class="text-demo-wrap">
 <h1 data-split="heading" class="text-demo-h">We’re using GSAP’s SplitText to break this content into lines, words, and individual characters. Experiment with staggered tweens, custom ease functions, and dynamic transforms to bring your headlines to life.</h1>
 <div class="text-demo-buttons">
 <button data-split="button" data-split-type="lines" class="text-demo-button"><span>Lines</span></button>
 <button data-split="button" data-split-type="words" class="text-demo-button"><span>Words</span></button>
 <button data-split="button" data-split-type="letters" class="text-demo-button"><span>Letters</span></button>
 </div>
 </div>
</section>
<div class="osmo-credits">
 <p class="osmo-credits__p">Resource by <a target="_blank" href="https://www.osmo.supply?utm_source=codepen&utm_medium=pen&utm_campaign=masked-text-reveal" class="osmo-credits__p-a">Osmo</a>
 </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/CustomEase.min.js"></script>

// ------- Osmo [https://osmo.supply/] ------- //

gsap.registerPlugin(SplitText, CustomEase)

CustomEase.create("osmo-ease","0.625, 0.05, 0, 1");

function initMaskedTextReveal() {
 const heading = document.querySelector('[data-split="heading"]');
 const buttons = document.querySelectorAll('[data-split="button"]');

 SplitText.create(heading, {
 type: "lines, words, chars",
 mask: "lines",
 linesClass: "line",
 wordsClass: "word",
 charsClass: "letter"
 });

 let currentTween, currentTargets;
 const config = {
 lines: { duration: 0.8, stagger: 0.08 },
 words: { duration: 0.6, stagger: 0.06 },
 letters: { duration: 0.4, stagger: 0.008 }
 };

 function animate(type) {
 if(currentTween){
 currentTween.kill();
 gsap.set(currentTargets, { yPercent: 0 });
 }
 const { duration, stagger } = config[type] || {};
 const className = type === "lines"
 ? "line"
 : type === "words"
 ? "word"
 : "letter";
 const targets = heading.querySelectorAll(`.${className}`);
 
 currentTargets = targets;
 currentTween = gsap.fromTo(
 targets,
 { yPercent: 110 },
 { yPercent: 0, duration, stagger, ease: "osmo-ease" }
 );
 
 }

 buttons.forEach(btn => {
 btn.addEventListener("click", () => {
 animate(btn.dataset.splitType);
 });
 });
}

// Initialize Masked Text Reveal
document.fonts.ready.then(function () {
 initMaskedTextReveal();
})

/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
 background-color: #d8e1ed;
 font-family: PP Neue Montreal, Arial, sans-serif;
 color: #340824;
 font-size: 1vw;
 margin: 0;
 padding: 0;
 overscroll-behavior: none;
 min-height: 100%;
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg")
 2 0,
 auto;
}

a,
button {
 cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg")
 12 0,
 pointer;
}

.cloneable {
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 display: flex;
}

.text-demo-wrap {
 grid-column-gap: 4.5em;
 grid-row-gap: 4.5em;
 flex-flow: column;
 justify-content: flex-start;
 align-items: center;
 width: 100%;
 max-width: 80em;
 margin-left: auto;
 margin-right: auto;
 padding-left: 1.25em;
 padding-right: 1.25em;
 display: flex;
}

.text-demo-h {
 text-align: center;
 margin-top: 0;
 margin-bottom: 0;
 font-size: 3.75vw;
 font-weight: 500;
 line-height: 1.15;
}

.text-demo-buttons {
 grid-column-gap: 1.25em;
 grid-row-gap: 1.25em;
 justify-content: center;
 align-items: center;
 display: flex;
}

.text-demo-button {
 background-color: #fff;
 border-radius: 100em;
 padding: .625em 1.25em;
 font-size: 2em;
 line-height: 1;
 transition: color .15s, background-color .15s;
 border: 0;
 outline: 0;
 box-shadhow: 0;
}

.text-demo-button:hover {
 color: #fff;
 background-color: #340824;
}

.osmo-credits {
 z-index: 999;
 pointer-events: none;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 4em;
 padding: 1em;
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
 font-size: 1vw;
}

.osmo-credits__p {
 pointer-events: auto;
 color: rgba(19, 19, 19, 0.5);
 text-align: center;
 margin: 0;
 font-family: PP Neue Montreal, Arial, sans-serif;
 font-size: 1.125em;
 font-weight: 500;
 line-height: 1.3;
}

.osmo-credits__p-a {
 color: #340824;
}

@font-face {
 font-family: 'PP Neue Montreal';
 src: url('https://cdn.prod.website-files.com/6819ed8312518f61b84824df/6819ed8312518f61b84825ba_PPNeueMontreal-Medium.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

Masked Text Reveal (GSAP SplitText)
Original CodePen author account: osmosupply
Article author: Osmo
Code license: MIT under CodePen's verified public Pen policy.
Preserve the MIT notice and separate dependency/media credits.

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