Change image size when scrolling down

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)

2 Likes