@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
Hi Max,
I get an"internal server error" here:
https://doxdox.org/worldoptimizer/HypeScrollMagic
Would like to read the documentation 
Hey 
, DoxDox is designed to streamline the documentation process for me by extracting JSDoc annotations and comments directly from unminified source code. This allows user to access and read function documentation. The viewer has not seen recent updates and might be inactive. You can read the JSDoc directly inline, though. I am also going to create a tutorial video to get started with Hype Scroll Magic …. Given its current state, I am considering removing DoxDox, unless there’s renewed development. I might just be missing a package file.
In your example document, what is data-scroll-trigger and data-marker-color?
How are those keys used in the first scene?
Got it. If you've got any data-marker-* bits in your project, you'll want to switch them over to data-indicator-* to keep up with the latest tweaks in the HypeScrollMagic extension. You could also just grab the updated example file again to make things easy. This change is all part of a recent naming update in the extension to keep things tidy. Plus, there's a fresh fix on the GitHub repo that sorts out a little hiccup when running the extension without rulers, making it all run smoother.
Heads up: I'll be dropping a video later today tomorrow that walks you through how to get the most out of Hype Scroll Magic. Stay tuned!
2 Likes
Here is the intro... the CDN and Hype like to cache JS aggressive, so depending on when you try this, please add a cache buster like this:
Here is a quick intro video. Nothing fancy:
7 Likes
Thanks Max!
Very helpful, will start to explore possibilities and experiment a bit
Brilliant, I would say!
Would be nice if the key/value data attributes could be put on an element within a group.
You can group elements. I did a double group here. Please include an example that fails in your use case so I can have a look at it. Here is my working example:
2 Likes
Thanks!
Scene "1_scroll_within-div-scene_600x5400"
sort of almost works. But scene layout is not as intended.
Scene "2_scroll_within-div-scene_600x600_scaled"
has the scene properties I want; scale width and height.
Can't make it work.
The background colours should fill out the entire view port, regardless of height, width of the viewport.
Both scenes have a group with content overflow = "auto-scroll".
Some elements have the class name "fixedPosition":
Document head:
<style>
.fixedPosition {
position: fixed !important;
}
</style>
Can't figure out how to solve this. Perhaps not possible?
scroll-within-div-scaled_scene.hype.zip (35.1 KB)
A small update to scene "1_scroll_within-div-scene_600x5400" to better visualise what I try to achieve. Where there are coloured rectangles there will be photos and video clips.
Screen recording of how it looks when the viewport is exactly 1366x768:
Updated Hype document:
scroll-within-div-scaled_scene.hype.zip (46.6 KB)
Want the coloured areas to fill the viewport regardless of width/height of the viewport.
Yes, I see. You are not using the project as intended with the individual elements and timelines. What you are doing is only binding the main timeline to scroll. In that case I'd suggest having a look at:
Did test and considered HypeStickyScroll before I tried HypeScrollMagic. Will give it a second thought!
The above Hype document is just a simple test. The client project I'm working on will have many more elements, with individual timelines, and interaction within some of the sections.
What I can't get to work properly is this setup: all scenes 1366x768, scale width and scale height set to ON, all elements for the scroll experience within a container with auto-scroll, size 1366x768 - and finally this container with the flex settings to stretch in all directions.
Will continue to experiment
I still don't get the fixedPosition? The library has its own solution and works with pinning.
2 Likes
BTW there is yet another solution (only a file, not on GitHub that supports overflows, but is a little more technical)
The idea, in short; a bunch of photos and video loops is the backgrund layer. Photos and videos should not move upwards as we scroll, just fade in/fade out. Also at the background layer, just plain colours will appear, colours move upwards as we scroll.
Second layer is texts. Texts can fade in/fade out, move in different directions. (Should not be too many variations here.)
Third layer is animated vector graphics, they move with the scroll and have individual timelines.
Roughly something like that.
Still my challenge with Hype and HypeScrollMagic or HypeStickyScroll; how to make the background layer fill the viewport, as in this example…
(works OK in the range 1024x768 — 1920x1080)
expand_to_fill.hype.zip (250.8 KB)
All preferably in this case, with in one scene.
If you don't mind Max, tell us more
(that technical file)