Hey everyone,
I'm excited to announce that I've updated the HypeSceneMagic project! Originally developed in 2019, HypeSceneMagic has been revitalized to leverage the powerful GSAP animation library, providing even smoother and more enhanced animation experiences within Tumult Hype.
Inspiration:
The core concept and aesthetics draw inspiration from Apple Keynote's Magic Move transition. If you've ever been captivated by the seamless transitions and animations in Apple presentations, that's exactly the level of polish we're aiming to bring to your Hype projects.
What's New?
- GSAP Integration: The project now utilizes GSAP instead of the Web Animations API, offering more robust and feature-rich animation capabilities.
- Enhanced Transition Properties: Added several properties and functions to fine-tune animations and transitions, including support for runtime transition mapping.
- Case-Insensitive Identifiers: Transition identifiers are now case-insensitive and can be matched without the
magicprefix, simplifying the process of matching elements across scenes. - Improved Performance: By leveraging GSAP's efficient animation engine, transitions are smoother and more performant.
- Simplified Transition Modes: Removed the indirect transition mode to streamline the user experience, focusing on intuitive and straightforward transitions.
- Updated Documentation: Enhanced code comments and documentation for better clarity, tailored specifically for Tumult Hype users.
Usage & Integration:
The integration remains straightforward:
-
Include Required Libraries:
Add the following scripts to your Head HTML in Tumult Hype:<script src="https://cdn.jsdelivr.net/npm/gsap@latest/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeSceneMagic/HypeSceneMagic.min.js"></script>Note: For production environments, it's recommended to download these scripts and include them locally in your project to ensure reliability and performance.
-
Apply Magic Transitions:
- Using Class Names: Assign class names starting with
magicto elements you want to animate across scenes. For example,magicBox,magicCircle, or any unique identifier likemagicMyElement. - Using Data Attributes: Alternatively, use the
data-transition-idattribute to assign a unique identifier to elements. In this case it would bebox,circleorMyElement.
Identifiers are case-insensitive and matched without themagicprefix.
- Using Class Names: Assign class names starting with
-
Trigger Scene Transitions:
showSceneNamedMagic (Hype signature)
Use the provided functions to navigate between scenes with magic transitions using the familiar Hype function signature found on the regular
showSceneNamed:// Navigate to a specific scene with magic transition hypeDocument.showSceneNamedMagic('SceneName', duration, easing, options);duration: (Optional) Transition duration in seconds. Default is0.5.easing: (Optional) Easing function name. Default ispower1.inOut.options: (Optional) An object containing additional settings likecrossFadeFactor,onTransitionStart, andonTransitionEnd.
magicCard (shorthand)
// Navigate using a magic card transition hypeDocument.magicCard(name, settingsOrDuration);This function provides a quick way to navigate from a single interface. It is especially good in conjunction with Hype Reactive Content or Hype Action Events, both of which enable running inline JavaScript from Trigger Custom Behavior.
-
name: (String) The navigation target. The supported values are:
- '>': Navigates to the next scene in the timeline.
- '<': Navigates to the previous scene.
- '>SceneBaseName': Searches forward from the current scene and navigates to the first scene name that starts with SceneBaseName.
- '<SceneBaseName': Searches backward from the current scene and navigates to the first scene name that starts with SceneBaseName.
- 'ExactSceneName': Navigates directly to the scene with the specified name.
-
options: (Optional) This can be either a number specifying the transition duration in seconds (default is 0.5), or an Object containing any of the following properties:
- duration: (Number) The transition duration in seconds. Default is
0.5. - ease: (String) The name of the easing function to use (e.g.,
power1.inOut). - crossFadeFactor: (Number) A value from 0 to 1 that controls the cross-fade timing.
- onTransitionPrepare: (Function) A callback function that runs before any transition setup.
- onTransitionStart: (Function) A callback function that runs when the transition animation begins.
- onTransitionProgress: (Function) A callback function that runs repeatedly during the transition, providing the progress (a value from 0 to 1).
- onTransitionEnd: (Function) A callback function that runs after the transition has fully completed.
Usage Examples
Here's how you can use magicCard for scene navigation:
// Navigate to the next scene with a 1-second duration hypeDocument.magicCard('>', 1); // Navigate to the previous scene with default options hypeDocument.magicCard('<'); // Find the next scene that starts with "Chapter" hypeDocument.magicCard('>Chapter'); // Navigate to a specific scene with a custom ease and an end callback hypeDocument.magicCard('FinalResults', { duration: 0.7, ease: 'bounce.out', onTransitionEnd: function() { console.log('Arrived at the final results!'); } }); - duration: (Number) The transition duration in seconds. Default is
Example Project:
For a comprehensive example that also includes Hype Data Magic and Hype Reactive Content, check out the project below:
HypeSceneMagic-with-Data-Magic.hype.zip (1,6 MB)
This example demonstrates how you can combine multiple extensions to create dynamic and interactive content. For simpler examples scroll down!
Getting Started:
For simpler examples and a step-by-step guide on how to get started, please refer to the GitHub repository and read through the thread below.
With these updates, HypeSceneMagic is now more powerful and easier to use than ever. I can't wait to see the amazing transitions and animations you'll create with it!
Happy animating!
Note: The old version using the Web Animations API has been deprecated in favor of the new GSAP-powered version. Here is the static cover for safe keeping if I don't want to use the video anymore:
