Hype Scroll Magic

Extension Project
1

Hype Scroll Magic
Hype Scroll Magic1920×1357 326 KB

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.

Video walkthrough:

Example:

HypeScrollMagic.hype.zip (278,7 KB)

Example last updated Feb. 21, 2024

9 Likes
2

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
3

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

and great examplefile @MaxZieb

1 Like
4

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
5

↑ look at project
Version 1.0.3

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

5 posts were split to a new topic: Getting started with Hype Scroll Magic

8

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
9

↑ 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-*
2 Likes
13

↑ look at project
Version 1.0.6

  • Removed HypeRulerHelper as the debugging plugin now operates independently

Version 1.0.7

  • Fixed issue with horizontal and vertical controllers
3 Likes
14

↑ look at project
Version 1.0.8

  • Added support duration as percentage
  • Added support for Hype Action Events: data-scroll-offset-action, data-scroll-duration-action, data-scroll-trigger-action, data-scroll-progress-action, data-scroll-enter-action, data-scroll-leave-action
  • Added support for CSS variables to track scroll progress, duration and offset data-scroll-properties
  • Fixed issue with indicator color being set to black
  • Fixed issue with missing timeline name allowing pinning only

This is a rather big release. It adds support for Hype Action events and CSS properties, offering a lot of flexibility in initialization and event listening if needed. These additions merit their own video and explanation once I find the time for it.

4 Likes
15

Awesome, I'd love to see the improvements action.

16

↑ look at project
Version 1.0.9

  • Added support for percentage offset based on bounding box
  • Added the Hype Action Event data-scroll-action as a catch-all (event.type-based settings)
  • Fixed percentage support for duration and offset by precalculating

Version 1.1.0

  • Added query to make sure data-scroll-properties add scroll listeners
  • Added query to make sure that Hype Action Event scroll actions add scroll listeners
  • Added more robust controller and scene management and garbage collection
  • Added support for scene and element classes additions during scroll events
  • Removed all dataset references from addScrollTimeline to avoid side effects
  • Added scroll name to options to allow for more
4 Likes
17

bravo! thanks also for the detailed video Max

1 Like
18

Wow, very powerful

1 Like