Hype Easing Names Mapped to GSAP Equivalents
Hype easing names are automatically mapped to their corresponding GSAP easing functions for seamless integration.
| HypeSceneMagic Easing | GSAP Equivalent |
|---|---|
easein |
power1.in |
easeout |
power1.out |
easeinout |
power1.inOut |
Example: Using Mapped Easing
When using HypeSceneMagic with mapped easings, the easing name is internally converted to the appropriate GSAP easing function. For instance:
// This converts "easeout" to GSAP's "power1.out"
hypeDocument.showSceneNamedMagic("Scene2", 1.5, "easeout");
Directly Using GSAP Easings
You can also specify any GSAP easing function directly for more advanced transitions. Keep in mind that HypeSceneMagic might switch to Anime.js in the future, so direct GSAP easings are not officially supported, but should continue to work just fine as long as you bundle and use the GSAP version of this Hype Scene Magic.
Example: Using GSAP Bounce with Custom Strength
Here's how to apply a GSAP easing like bounce.out with custom parameters:
// Pro tip: Customize easing behavior, such as increasing bounce strength
hypeDocument.showSceneNamedMagic("Scene2", 1.5, "bounce.out(2)");
By following this documentation, you can take advantage of both mapped and custom easing functions to create smooth and dynamic scene transitions.