Gsap Animation

Animation Builder with GSAP

Create a visually dynamic experience using GSAP-powered transitions. From hover effects to animated NFT reveals, everything feels alive and interactive—without needing heavy JavaScript skills.

use a context so that if this is called from within another context or a gsap.matchMedia(), we can perform proper cleanup like the "resize" event handler on the window

The returned timeline will have the following methods added to it: osmo.js ➪ // project slider

• next() - animates to the next element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.

• previous() - animates to the previous element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.

• toIndex() - pass in a zero-based index value of the element that it should animate to, and optionally pass in a vars object to control duration, easing, etc. Always goes in the shortest direction

• current() - returns the current index (if an animation is in-progress, it reflects the final index)

Javascript files

gsap.js

// gsap slider
gsap.registerPlugin(CustomEase, Flip )

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

gsap.defaults({
  ease: "osmo-ease",
  duration: 0.8,
});

function initFlipButtons() {
  ...
}

osmo.js

Add images, embedded content, code blocks, and more.

// project slider
document.addEventListener("DOMContentLoaded", (event) => {
  const marqueeItems = document.querySelectorAll(".marquee-item");
  const btnPrev = document.querySelector(".arrow-prev");
  const btnNext = document.querySelector(".arrow-next");
  const conf = { duration: 1, ease: "power.inOut" };..
  window.addEventListener("load", function () {
    ...
  });
});

Example

Card carousel

<div class="marquee-wrapper">
    
    <!-- items -->
    <div class="marquee crypt-scroll">

        <!-- card -->
        <div class="marquee-item">
            <div class="project">
                <div class="project-link" data-bs-toggle="modal" data-bs-target="#NFTsPreview">

                    <!-- assets -->
                    <span class="project-img-wrapper">
                        <img class="project-img" src="..." alt="" />
                    </span>

                    <!-- content -->
                    <span class="project-details d-grid">
                        ...
                    </span>

                </div>
            </div>
        </div>

    </div>

    <!-- arrow -->
    <button type="button" class="marquee-arrow arrow-prev" aria-label="Go to the previous team member">
        ...
    </button>
    <button type="button" class="marquee-arrow arrow-next" aria-label="Go to the next team member">
        ...
    </button>

</div>

Looping words

<div class="looping-words lg">

    <div class="looping-words-containers">
        <div data-looping-words-list="" class="looping-words-list">

            <div class="looping-words-list">
                <div class="looping-words-p">
                    ...
                </div>
            </div>

            <div class="looping-words-list">
                <div class="looping-words-p">
                    ...
                </div>
            </div>

            <div class="looping-words-list">
                <div class="looping-words-p">
                    ...
                </div>
            </div>

            <div class="looping-words-list">
                <div class="looping-words-p">
                    ...
                </div>
            </div>

            <div class="looping-words-list">
                <div class="looping-words-p">
                    ...
                </div>
            </div>

        </div>
    </div>

    <div class="looping-words-fade"></div>
    
    <div data-looping-words-selector="" class="looping-words-selector">

        <div class="looping-words-edge"></div>
        <div class="looping-words-edge is--2"></div>
        <div class="looping-words-edge is--3"></div>
        <div class="looping-words-edge is--4"></div>

    </div>

</div>