GsapWrapper

gsap_gsap-wrapper.js

"use strict";

/**
 * This class bundles `gsap` methods together for fast use.
 *
 * <p>
 * Note: the `selector` may be an `#id`, `.class`, `tag` as you wish.
 * All functions return `Tween` / `gsap.timeline()`.
 * </p>
 *
 * @requires https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js
 *           https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugin.min.js
 *           https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js
 *           to be imported in the <tt>index.html</tt> beforehand.
 *           (For some reason, this CDN cannot be imported here...)
 *
 * <b>For example:</b>
 * ------------------------------------------------
 * <tt>index.html:</tt>
 * @code {
 * <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 * <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugin.min.js"></script>
 * <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
 * <script src="main.js" type="module"></script>
 * }
 *
 * <tt>main.js:</tt>
 * @code {
 * import {GsapWrapper} from "./gsap/gsap-wrapper.js";
 * GsapWrapper.fadeUp(".class-name");
 * }
 * ------------------------------------------------
 */
export class GsapWrapper {

    static moveLeftToRight(selector) {
        return gsap.to(selector, {duration: 1, x: 100});
    }

    static fadeDown(selector) {
        return gsap.from(selector, {opacity: 0, duration: 1, y: -50});
    }

    static fadeUp(selector) {
        return gsap.from(selector, {opacity: 0, duration: 1, y: 30});
    }

    static fadeRightToLeft(selector) {
        return gsap.from(selector, {
            backgroundPosition: '200px 0px',
            opacity: 0,
            duration: 1,
            x: 100
        });
    }

    /**
     * Special `stagger` for *stacked* elements.
     * @param selector for some *stacking* tag element.
     * @returns {*} `Tween` / `gsap.timeline`.
     */
    static staggerDown(selector) {
        return gsap.from(selector, {
            opacity: 0,
            duration: 1,
            y: -50,
            stagger: 0.6
        });
    }

    /**
     * Start the animation when `selector` enters the viewport (once).
     */
    static scrollTriggerLeftToRight(selector) {
        return gsap.to(selector, {
            scrollTrigger: selector,
            x: 500
        });
    }

    static scrollToElementById(elementIdToScrollTo) {
        return gsap.to(window, {
            duration: 1,
            scrollTo: `#${elementIdToScrollTo}`
        });
    }

    static scrollToHeight(height) {
        return gsap.to(window, {duration: 1, scrollTo: height});
    }

}

gsap_README.md

GsapWrapper

This class bundles gsap methods together for fast use.

NOTE: the selector may be an #id, .class, tag as you wish. All functions return Tween / gsap.timeline().

Requires:

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugi

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger

  to be imported in the index.html beforehand.
  (For some reason, this CDN cannot be imported within .js files.)

---

Import:

Import the provided code to your files:

index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="main.js" type="module"></script>

main.js:

import {GsapWrapper} from "./gsap/gsap-wrapper.js";

GsapWrapper.fadeUp(".class-name"); // Example of use.

---