|
"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}); |
|
} |
|
|
|
} |
