Yes, There probably is a better way of doing all this.
A lot depends on;
The browser height,
The trigger Top.
Some may not get triggered depending where the trigger position is, compounded by browser height and speed of timeline increments.
Bit of a head F$$$@ to be honest.
So took a slightly different direction.
I removed the code being triggered by an element and put it in a Run Javascript Action On Proper For Display. on the Main Scene.
The code has a listener in it already for scroll so we just use that properly.
We now loop over each symbol and check its Top & Bottom position. against the windows 0 point and bottom point.
If the symbol is deemed outside viewport it will reverse the timeline
Inside and we go forward.
This seems to work much better
The main thing is it is a little better in understanding what's going on and may give you a better starting point in figuring things out.
New code
window.onscroll = function() {scrollTimelineSync()};
function scrollTimelineSync() {
symbols = hypeDocument.getSymbolInstancesByName('Symbol')
for (let i = 0; i < symbols.length; i++) {
var bounding = symbols[i].element().getBoundingClientRect()
console.log(symbols[i].element().id ,bounding.top)
//if (bounding.top - 150 >= 0 && bounding.bottom <= window.innerHeight - 200 ) {
if (bounding.top >= 0 && bounding.bottom <= window.innerHeight ) {
symbols[i].goToTimeInTimelineNamed(symbols[i].currentTimeInTimelineNamed('Main Timeline') + .15 , 'Main Timeline');
} else {
symbols[i].goToTimeInTimelineNamed(symbols[i].currentTimeInTimelineNamed('Main Timeline') - .15 , 'Main Timeline');
}
}
}
You can play with ratios of where the trigger points are like so
if (bounding.top - 150 >= 0 && bounding.bottom <= window.innerHeight - 200 ) {
Element position affect this..
--
scroll-Symbol_MHv2.hype.zip (2.1 MB)
--
You can change each symbol message text with
The quick start will explain the simple steps.
But just add the CDN link to the head
<script src="https://cdn.jsdelivr.net/gh/markhunte/Hype_Symbol_Override_Extension@main/symbolOverride.min.js"></script
>
Go into the symbol and select the text box, set an Extended Attribute on it to
Key
data-message_text
Value
innerText
Exit the symbol.
Select all the symbols and set an Extended Attribute Key on them all to the same key that's was used on the text box
data-message_text
And then individually select each Symbol's Extended Attribute data-message_text
and set the Value to your text.
The Documentation pages give you more ideas on other properties you can use.
scroll-Symbol_MHv2_extns.hype.zip (2.1 MB)