Grid Zoom Layout

import { TextReveal } from './textReveal';
import { TextLinesReveal } from './textLinesReveal';

/**
 * Class representing a content item (.content__item).
 */
export class ContentItem {
    // DOM elements
    DOM = {
        // Main element (.content__item)
        el: null
    };
    // TextReveal obj to animate the texts (slide in/out)
    textReveal = null;
    // TextLinesReveal obj to animate the ,ulti line texts (slide in/out)
    textLinesReveal = null;
    
    /**
     * Constructor.
     * @param {Element} DOM_el - the .content__item element.
     */
    constructor(DOM_el) {
        this.DOM.el = DOM_el;
        this.DOM.nav = {
            prev: this.DOM.el.querySelector('.slide-nav__img--prev'),
            next: this.DOM.el.querySelector('.slide-nav__img--next')
        };

        // Text animations
        this.textReveal = new TextReveal([...this.DOM.el.querySelectorAll('.oh')]);
        // Text lines animations
        this.textLinesReveal = new TextLinesReveal(this.DOM.el.querySelector('.content__item-text'));
    }
}

import { ImageCell } from './imageCell';
import { calcWinsize, adjustedBoundingRect } from './utils';
import { TextReveal } from './textReveal';
import { gsap } from 'gsap';

// body element
const bodyEl = document.body;

// Calculate the viewport size
let winsize = calcWinsize();
window.addEventListener('resize', () => winsize = calcWinsize());

/**
 * Class representing a grid of images, where the grid can be zoomed to the clicked image cell
 */
export class Grid {
    // DOM elements
    DOM = {
        // main element (.grid)
        el: null,
        // .grid__cell-img elements
        imageCells: null,
        // content section
        content: null,
        // .back button
        backCtrl: null,
        // The mini grid shown in the content area
        miniGrid: {
            // main element
            el: null,
            // cells
            cells: null
        }
    };
    // ImageCell instances array
    imageCellArr = [];
    // Index of current imageCell
    currentCell = -1;
    // Checks if in view mode or if in content mode
    isGridView = true;
    // Checks for active animation
    isAnimating = false;
    // TextReveal obj to animate the texts (slide in/out)
    textReveal = null;

    /**
     * Constructor.
     * @param {Element} DOM_el - the .grid--large element
     */
    constructor(DOM_el) {
        this.DOM.el = DOM_el;
        this.DOM.imageCells = [...this.DOM.el.querySelectorAll('.grid__cell-img')];
        this.DOM.imageCells.forEach(el => this.imageCellArr.push(new ImageCell(el)));
        this.DOM.content = document.querySelector('.content');
        this.DOM.backCtrl = this.DOM.content.querySelector('.back');
        this.DOM.miniGrid.el = this.DOM.content.querySelector('.grid--mini');
        this.DOM.miniGrid.cells = [...this.DOM.miniGrid.el.querySelectorAll('.grid__cell')];

        // Text animations
        this.textReveal = new TextReveal([...this.DOM.el.querySelectorAll('.oh')]);
        // Events
        this.initEvents();
        // Track which cells are visible
        //this.trackVisibleCells();
    }

    /**
     * Track which cells are visible (inside the viewport)
     * by adding/removing the 'in-view' class when scrolling.
     * This will be used to animate only the ones that are visible.
     */
    trackVisibleCells() {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.intersectionRatio > 0) {
                    entry.target.classList.add('in-view');
                } 
                else {
                    entry.target.classList.remove('in-view');
                }
            });
        });
        this.DOM.imageCells.forEach(img => observer.observe(img));
    }

    /**
     * Init/Bind events.
     */
    initEvents() {
        // for every imageCell
        for (const [position,imageCell] of this.imageCellArr.entries()) {

            // Open the imageCell and reveal its content
            imageCell.DOM.el.addEventListener('click', () => {
                if ( !this.isGridView || this.isAnimating ) {
                    return false;
                }
                this.isAnimating = true;
                this.isGridView = false;

                // Update the mini grid current cell
                if ( this.currentCell !== -1 ) {
                    this.DOM.miniGrid.cells[this.currentCell].classList.remove('grid__cell--current');
                }

                // Update currentCell
                this.currentCell = position;
                this.DOM.miniGrid.cells[this.currentCell].classList.add('grid__cell--current');

                this.showContent(imageCell);
            });

            // Hover on the image cell will scale down the outer element and scale up the inner element.
            imageCell.DOM.el.addEventListener('mouseenter', () => {
                if ( !this.isGridView ) {
                    return false;
                }
                gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner]);
                gsap.timeline({
                    defaults: {duration: 2.4, ease: 'expo'}
                })
                .to(imageCell.DOM.el, {scale: 0.95}, 0)
                .to(imageCell.DOM.inner, {scale: 1.4}, 0);
            });

            // Hovering out will reverse the scale values.
            imageCell.DOM.el.addEventListener('mouseleave', () => {
                if ( !this.isGridView ) {
                    return false;
                }
                gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner]);
                gsap.timeline({
                    defaults: {duration: 2.4, ease: 'expo'}
                })
                .to([imageCell.DOM.el, imageCell.DOM.inner], {scale: 1}, 0);
            });

        }

        // Close the imageCell and reveal the grid
        this.DOM.backCtrl.addEventListener('click', () => {
            if ( this.isAnimating ) {
                return false;
            }
            this.isAnimating = true;
            this.isGridView = true;

            this.closeContent();
        });

        this.DOM.miniGrid.cells.forEach((cell, position) => {
            cell.addEventListener('click', () => {
                if ( this.isAnimating || this.currentCell === position ) {
                    return false;
                }
                this.isAnimating = true;
                this.changeContent(position);
            });
        });

        // Recalculate current image transform
        window.addEventListener('resize', () => {
            if ( this.isGridView ) {
                return false;
            }

            // Calculate the transform to apply to the image cell
            const imageTransform = this.calcTransformImage();
            gsap.set(this.imageCellArr[this.currentCell].DOM.el, {
                scale: imageTransform.scale,
                x: imageTransform.x,
                y: imageTransform.y
            });
        });
    }

    /**
     * Scale up the image and reveal its content.
     * @param {ImageCell} imageCell - the imageCell element.
     */
    showContent(imageCell) {
        // Calculate the transform to apply to the image cell
        const imageTransform = this.calcTransformImage();
        // All the others (that are inside the viewport)
        //this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el && el.classList.contains('in-view'));
        this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el);

        gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells]);
        gsap.timeline({
            defaults: {
                duration: 1.2, 
                ease: 'expo.inOut'
            },
            // overflow hidden
            onStart: () => bodyEl.classList.add('oh'),
            onComplete: () => {
                this.isAnimating = false;
            }
        })
        .addLabel('start', 0)
        .add(() => {
            // Hide grid texts
            this.textReveal.out();
        }, 'start')
        .set(this.DOM.el, {
            pointerEvents: 'none'
        }, 'start')
        .set(imageCell.DOM.el, {
            zIndex: 100
        }, 'start')
        .set([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells], {
            willChange: 'transform, opacity'
        }, 'start')
        .to(imageCell.DOM.el, {
            scale: imageTransform.scale,
            x: imageTransform.x,
            y: imageTransform.y,
            onComplete: () => gsap.set(imageCell.DOM.el, {willChange: ''})
        }, 'start')
        .to(imageCell.DOM.inner, {
            scale: 1,
            onComplete: () => gsap.set(imageCell.DOM.inner, {willChange: ''})
        }, 'start')
        .to([imageCell.contentItem.DOM.nav.prev, imageCell.contentItem.DOM.nav.next], {
            y: 0
        }, 'start')
        .to(this.otherImageCells, {
            opacity: 0,
            scale: 0.8,
            onComplete: () => gsap.set(this.otherImageCells, {willChange: ''}),
            stagger: {
                grid: 'auto',
                amount: 0.17,
                from: this.currentCell
            }
        }, 'start')
        .addLabel('showContent', 'start+=0.45')
        .to(this.DOM.backCtrl, {
            ease: 'expo',
            startAt: {x: '50%'},
            x: '0%',
            opacity: 1
        }, 'showContent')
        .set(this.DOM.miniGrid.el, {
            opacity: 1
        }, 'showContent')
        .set(this.DOM.miniGrid.cells, {
            opacity: 0
        }, 'showContent')
        .to(this.DOM.miniGrid.cells, {
            duration: 1, 
            ease: 'expo',
            opacity: 1,
            startAt: {scale: 0.8},
            scale: 1,
            stagger: {
                grid: 'auto',
                amount: 0.3,
                from: this.currentCell
            }
        }, 'showContent+=0.2')
        .add(() => {
            imageCell.contentItem.textReveal.in();
            imageCell.contentItem.textLinesReveal.in();
            this.DOM.content.classList.add('content--open');
        }, 'showContent')
        .add(() => imageCell.contentItem.DOM.el.classList.add('content__item--current'), 'showContent+=0.02');
    }

    /**
     * Scale down the image and reveal the grid again.
     */
    closeContent() {
        // Current imageCell
        const imageCell = this.imageCellArr[this.currentCell];
        this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el);
        
        gsap.timeline({
            defaults: {
                duration: 1, 
                ease: 'expo.inOut'
            },
            // overflow hidden
            onStart: () => bodyEl.classList.remove('oh'),
            onComplete: () => {
                this.isAnimating = false;
            }
        })
        .addLabel('start', 0)
        .to(this.DOM.backCtrl, {
            x: '50%',
            opacity: 0
        }, 'start')
        .to(this.DOM.miniGrid.cells, {
            duration: 0.5, 
            ease: 'expo.in',
            opacity: 0,
            scale: 0.8,
            stagger: {
                grid: 'auto',
                amount: 0.1,
                from: -this.currentCell
            },
            onComplete: () => {
                gsap.set(this.DOM.miniGrid.el, {
                    opacity: 0
                })
            }
        }, 'start')

        .add(() => {
            imageCell.contentItem.textReveal.out();
            imageCell.contentItem.textLinesReveal.out();
            this.DOM.content.classList.remove('content--open');
        }, 'start')
        .add(() => imageCell.contentItem.DOM.el.classList.remove('content__item--current'))
        .addLabel('showGrid', 0)
        .set([imageCell.DOM.el, this.otherImageCells], {
            willChange: 'transform, opacity'
        }, 'showGrid')
        .to(imageCell.DOM.el, {
            scale: 1,
            x: 0,
            y: 0,
            onComplete: () => gsap.set(imageCell.DOM.el, {willChange: '', zIndex: 1})
        }, 'showGrid')
        .to(imageCell.contentItem.DOM.nav.prev, {
            y: '-100%'
        }, 'showGrid')
        .to(imageCell.contentItem.DOM.nav.next, {
            y: '100%'
        }, 'showGrid')
        .to(this.otherImageCells, {
            opacity: 1,
            scale: 1,
            onComplete: () => {
                gsap.set(this.otherImageCells, {willChange: ''});
                gsap.set(this.DOM.el, { pointerEvents: 'auto' });
            },
            stagger: {
                grid: 'auto',
                amount: 0.17,
                from: -this.currentCell
            }
        }, 'showGrid')
        .add(() => {
            // Show grid texts
            this.textReveal.in();
        }, 'showGrid+=0.3')
    }
    /**
     * 
     */
    changeContent(position) {
        // Current imageCell
        const imageCell = this.imageCellArr[this.currentCell];
        // Upcoming imageCell
        const upcomingImageCell = this.imageCellArr[position];
        
        this.DOM.miniGrid.cells[this.currentCell].classList.remove('grid__cell--current');
        this.currentCell = position;
        this.DOM.miniGrid.cells[this.currentCell].classList.add('grid__cell--current');

        // Calculate the transform to apply to the image cell
        const imageTransform = this.calcTransformImage();
        
        gsap.timeline({
            defaults: {
                duration: 1, 
                ease: 'expo.inOut'
            },
            onComplete: () => {
                this.isAnimating = false;
            }
        })
        .addLabel('start', 0)
        .add(imageCell.contentItem.textReveal.out(), 'start')
        .add(imageCell.contentItem.textLinesReveal.out(), 'start')
        .add(() => {
            imageCell.contentItem.DOM.el.classList.remove('content__item--current');
        })
        .set([imageCell.DOM.el, upcomingImageCell.DOM.el], {
            willChange: 'transform, opacity'
        }, 'start')
        .to(imageCell.DOM.el, {
            opacity: 0,
            scale: 0.8,
            x: 0,
            y: 0,
            onComplete: () => gsap.set(imageCell.DOM.el, {willChange: '', zIndex: 1})
        }, 'start')
        .to(imageCell.contentItem.DOM.nav.prev, {
            y: '-100%'
        }, 'start')
        .to(imageCell.contentItem.DOM.nav.next, {
            y: '100%'
        }, 'start')
        
        .addLabel('showContent', '>-=0.4')
        .set(upcomingImageCell.DOM.el, {
            zIndex: 100
        }, 'start')
        .to(upcomingImageCell.DOM.el, {
            scale: imageTransform.scale,
            x: imageTransform.x,
            y: imageTransform.y,
            opacity: 1,
            onComplete: () => gsap.set(upcomingImageCell.DOM.el, {willChange: ''})
        }, 'start')
        .to([upcomingImageCell.contentItem.DOM.nav.prev, upcomingImageCell.contentItem.DOM.nav.next], {
            ease: 'expo',
            y: 0
        }, 'showContent')
        .add(() => {
            upcomingImageCell.contentItem.textReveal.in();
            upcomingImageCell.contentItem.textLinesReveal.in();
        }, 'showContent')
        .add(() => {
            upcomingImageCell.contentItem.DOM.el.classList.add('content__item--current');
        }, 'showContent+=0.02');
    }
    /**
     * Calculates the scale and translation values to apply to the image cell when we click on it. 
     * Also used to recalculate those values on resize.
     * @return {JSON} the translation and scale values
     */
    calcTransformImage() {
        const cellrect = adjustedBoundingRect(this.imageCellArr[this.currentCell].DOM.el);
        return {
            scale: winsize.width * 0.54 / cellrect.width,
            x: winsize.width * 0.65 - (cellrect.left + cellrect.width/2),
            y: winsize.height * 0.50 - (cellrect.top + cellrect.height/2)
        };
    }
}

import { ContentItem } from './contentItem';

/**
 * Class representing a image cell (.grid__cell-img).
 */
export class ImageCell {
    // DOM elements
    DOM = {
        // Main element (.grid__cell-img)
        el: null,
        // Inner element
        inner: null,
        // The ImageCell's content item id.
        contentId: null,
        // The ContentItem instance
        contentItem: null
    };
    
    /**
     * Constructor.
     * @param {Element} DOM_el - the .grid__cell-img element.
     */
    constructor(DOM_el) {
        this.DOM.el = DOM_el;
        this.DOM.inner = this.DOM.el.querySelector('.grid__cell-img-inner');
        
        // The ImageCell's content item id.
        this.contentId = this.DOM.inner.dataset.item;
        // The ContentItem instance
        this.contentItem = new ContentItem(document.querySelector(`#${this.contentId}`));
    }
}

import { preloadImages } from './utils';
import { Grid } from './grid';

// Initialize the grid
new Grid(document.querySelector('.grid--large'));

// Preload images then remove loader (loading class) from body
preloadImages('.grid__cell-img-inner, .slide-nav__img').then(() => document.body.classList.remove('loading'));

import SplitType from 'split-type';
import { wrapLines } from './utils';
import { gsap } from 'gsap';

export class TextLinesReveal {
    constructor(animationElems) {
        this.DOM = {
            animationElems: Array.isArray(animationElems) ? animationElems : [animationElems]
        };

        // array of SplitType instances
        this.SplitTypeInstances = [];
        // array of all HTML .line
        this.lines = [];

        for (const el of this.DOM.animationElems) {
            const SplitTypeInstance = new SplitType(el, { types: 'lines' });
            // wrap the lines (div with class .oh)
            // the inner child will be the one animating the transform
            wrapLines(SplitTypeInstance.lines, 'div', 'oh');
            this.lines.push(SplitTypeInstance.lines);
            // keep a reference to the SplitType instance
            this.SplitTypeInstances.push(SplitTypeInstance);
        }

        this.initEvents();
    }
    in() {
        // lines are visible
        this.isVisible = true;

        // animation
        gsap.killTweensOf(this.lines);
        return gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}})
        .set(this.lines, {
            y: '150%',
            rotate: 15
        })
        .to(this.lines, {
            y: '0%',
            rotate: 0,
            stagger: 0.04
        });
    }
    out() {
        // lines are invisible
        this.isVisible = false;

        // animation
        gsap.killTweensOf(this.lines);
        return gsap.timeline({
            defaults: {duration: 0.5, ease: 'expo.in'}
        })
        .to(this.lines, {
            y: '-150%',
            rotate: -5,
            stagger: 0.02
        });
    }
    initEvents() {
        window.addEventListener('resize', () => {
            // empty the lines array
            this.lines = [];
            // re initialize the Split Text 
            for (const instance of this.SplitTypeInstances) {
                // re-split text
                // https://github.com/lukePeavey/SplitType#instancesplitoptions-void
                instance.split();

                // need to wrap again the new lines elements (div with class .oh)
                wrapLines(instance.lines, 'div', 'oh');
                this.lines.push(instance.lines);
            }
            // hide the lines
            if ( !this.isVisible ) {
                gsap.set(this.lines, {y: '-150%'});
            }
        });
    }
}

import { gsap } from 'gsap';

export class TextReveal {
    constructor(el) {
        this.DOM = {
            outer: el,
            inner: Array.isArray(el) ? el.map(outer => outer.querySelector('.oh__inner')) : el.querySelector('.oh__inner')
        }
    }
    in() {
        if ( this.outTimeline && this.outTimeline.isActive() ) {
            this.outTimeline.kill();
        }

        this.inTimeline = gsap.timeline({defaults: {duration: 1.2, ease: 'expo'}})
        .set(this.DOM.inner, {
            y: '120%',
            rotate: 15
        })
        .to(this.DOM.inner, {
            y: '0%',
            rotate: 0,
            stagger: 0.03
        });
        return this.inTimeline;
    }
    out() {
        if ( this.inTimeline && this.inTimeline.isActive() ) {
            this.inTimeline.kill();
        }

        this.outTimeline = gsap.timeline({defaults: {duration: 0.5, ease: 'expo.in'}})
        .to(this.DOM.inner, {
            y: '-120%',
            rotate: -5,
            stagger: 0.03
        });
        return this.outTimeline;
    }
}

const imagesLoaded = require('imagesloaded');

// Preload images
const preloadImages = (selector = 'img') => {
    return new Promise((resolve) => {
        imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
    });
};

const calcWinsize = () => {
    return { width: window.innerWidth, height: window.innerHeight };
};

const getScrollValues = () => {
    const supportPageOffset = window.pageXOffset !== undefined;
    const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
    const x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
    const y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    return {x,y};
}

// wrap each element of an array
// elems - the array of elements to wrap
// wrapType - type of wrapper ('div', 'span' etc)
// wrapClass - wrapper class(s) 
const wrapLines = (elems, wrapType, wrapClass) => {
    elems.forEach(char => {
        // add a wrap for every char (overflow hidden)
        const wrapEl = document.createElement(wrapType);
        wrapEl.classList = wrapClass;
        char.parentNode.appendChild(wrapEl);
        wrapEl.appendChild(char);
    });
}

const adjustedBoundingRect = el => {
    var rect = el.getBoundingClientRect();
    var style = getComputedStyle(el);
    var tx = style.transform;
  
    if (tx) {
      var sx, sy, dx, dy;
      if (tx.startsWith('matrix3d(')) {
        var ta = tx.slice(9,-1).split(/, /);
        sx = +ta[0];
        sy = +ta[5];
        dx = +ta[12];
        dy = +ta[13];
      } else if (tx.startsWith('matrix(')) {
        var ta = tx.slice(7,-1).split(/, /);
        sx = +ta[0];
        sy = +ta[3];
        dx = +ta[4];
        dy = +ta[5];
      } else {
        return rect;
      }
  
      var to = style.transformOrigin;
      var x = rect.x - dx - (1 - sx) * parseFloat(to);
      var y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(' ') + 1));
      var w = sx ? rect.width / sx : el.offsetWidth;
      var h = sy ? rect.height / sy : el.offsetHeight;
      return {
        x: x, y: y, width: w, height: h, top: y, right: x + w, bottom: y + h, left: x
      };
    } else {
      return rect;
    }
}

export { 
    preloadImages,
    calcWinsize,
    getScrollValues,
    wrapLines,
    adjustedBoundingRect
};

README.md
## Credits

- Images from [Unsplash](https://unsplash.com/)


## License
[MIT](LICENSE)

Made with :blue_heart:  by [Codrops](http://www.codrops.com)

MIT License

Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)

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.

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