Hype Scroll Magic

HypeScrollMagic is a JavaScript extension designed for integration with Tumult Hype, enabling developers and designers to create interactive, scroll-based animations and interactions within their Hype projects. Leveraging the power of ScrollMagic, this extension makes it easy to trigger animations as users scroll through a webpage, enhancing the storytelling and user engagement of Hype animations.

Example:

HypeScrollMagic.hype.zip (278,7 KB)

Example last updated Feb. 21, 2024

9 Likes

Very cool, and great demo showing it off.

(side note, I dropped an item on the todo list to have some way to en-masse add additional html attributes)

1 Like

Tausendsassa!!!!!!!!!!! :slight_smile:

and great examplefile @MaxZieb

1 Like

Very neat, currently testing it within some rich media ad formats, that allow for calculating the ad placement in the page position. Looks very promising so far!

2 Likes

↑ look at project
Version 1.0.3

  • Added behavior triggers, default options and better markers
  • New example file
  • More documentation on GitHub
1 Like

@MaxZieb Hi Max. Please, would you mind to clarify what are the differences or added features of this new HypeScrollMagic JS extension in comparison to those built-in actions On Enter Viewport / On Exit Viewport.
Thanks!

Hi Ed,

If you take a moment to explore the example file I provided, the advantages of the HypeScrollMagic JS extension over the built-in On Enter/Exit Viewport actions should become quite clear. This extension allows for a more nuanced and customizable approach to scroll interactions.

For starters, it's not limited to just listening for enter and exit events. You can implement custom behaviors and trigger action stacks, offering a much broader scope for interactivity. Additionally, it supports JavaScript callbacks that can be tied to scroll progress, allowing for dynamic responses as the user scrolls through the page.

Another key feature is the ability to link specific timelines to the scroll action, giving you precise control over animation timing and synchronization with the user's scroll position. The extension also enables you to define a boundary box for these interactions, further refining when and where actions are triggered.

One of the more flexible aspects is the ability to set the trigger offset as a percentage of the viewport. This means you can configure actions to be triggered not just at the top, middle, or bottom of the viewport, but at any percentage you choose, enabling a highly tailored user experience.

Beyond these features, there are even more benefits that I haven't fully explored in my current implementation. For instance, ScrollMagic, the underlying library behind this extension, supports horizontal scrolling, which could open up additional creative possibilities.

I have several more ideas in mind that I'm looking forward to implementing as soon as I find some more time. The potential here is vast, and I believe this extension can significantly enhance how we design scroll-based interactions in Hype.

I hope this clarifies the capabilities and advantages of the HypeScrollMagic extension. If you have any more questions or need further examples, feel free to ask!

Best,
MaxZieb

4 Likes

Thank you @MaxZieb for your in-depth explanation. I am sure it will serve all other Hype users who are into development of scroll-based interactive animations.

2 Likes

↑ look at project
Version 1.0.4

  • Added horizontal support data-scroll-horizontal, better marker support

Version 1.0.5

  • Fixed issue with options, refactored data-marker-* to data-indicator-*
1 Like