Change image size when scrolling down

[Matus]

I’d like to change image size when scrolling.
For example when the page is loaded, the image is in the centre.
When scrolling down, the image should be smaller. This should work also in other direction.

For better understanding I’m looking for result similar to this.

I’m sure this animation can be made with Javascript but I’m not familiar with this language.

Any help appreciated

[uedvincent]

Check this out Scroll control timeline

[JimScott]

@Matus

Hype project: scroll-SizeAdj_JHSv1.hype.zip (145.9 KB)

As You scroll down the page the image shrinks - all sizing and positioning is done in the “Main Timeline” using Hype’s interface - easy for You to change to fit your needs without coding.

Note: There is a JavaScript function (“controlTimeline”) that matches the vertical scroll position of the window to the Timeline. The only reason You would need to alter this JavaScript code would be if You had timeline other than the ‘Main Timeline’ to control. In that case simply change the Timeline name to the desired one.

hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');

This function is triggered by the “On Scene Load” handler in the “Scene Inspector”.

Post edit note: Updated file with changes per @MarkHunte (see 2 posts below):
scroll-SizeAdj_JHSv2.hype.zip (145.7 KB)

[Matus]

Thanks @JimScott

That’s what I was looking for. However, the animation doesn’t work in Safari. Why?

[MarkHunte]

The problem is with the if condition and the exact version of browsers.

Change the code to

window.onscroll = function() {scrollTimelineSync()};

	function scrollTimelineSync() {
 
		    whatScroll = (document.body.scrollTop || document.documentElement.scrollTop  )/ 120
		 
	    hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');
    }

[JimScott]

My mother always told me not to hang out with userAgents

[michelangelo (Freelancer)]

I'm working on a similar project, but I have a problem
If I create copies (even with a symbol) on the same page, all animations start at the same time, all instances in the rest of the page.

There is a way to start the scrolling animation when the symbol is in view? to use more than one.

Thanks!

[MaxZieb (Loves Hype)]

This might also work for you:

Hype Action Events

Another Example using the document scroll event data-document-scroll-action With this demo, I am actually not so sure if I do it in such a way in an actual production (hence, the title of experiment). I would probably rather have the entire sticky element be one symbol and use a progress function. In this example file, there is a lot of whitespace just to have room to scroll to drive progress. The following data attributes can be used to control the behavior of the scroll progress handler: …

[MarkHunte]

Make sure the size timeline is inside the Symbol
Then makes sure all the symbol Start Main Timeline action for each symbol instance are removed from the Main Timeline of the Main Scene.

You can then use waypoints/On Enterview Point

Then you can do something like this example.

If using On Enter Viewpoint

I would use an element inside the symbol ( opacity 0 ) which should allow you more adjustment of where the enter point is.

We add @MaxZieb 's hypeDocument.getSymbolInstance extension to the Head so we can easily get the element's parent symbol

You do not use ScrollTop per se to control the timeline, rather you increment the current time in the timeline by 0.1 ( or some number )

i.e symbolInstance.goToTimeInTimelineNamed(lastPoint + .1 , 'Main Timeline');

In this example we also compare the last scrollTop to the current scrollTop.
These are used to try to know if going up or down.

This example is by no means perfect but should give you an idea. ( you probably can look at some of the parallax posts for scroll control but the main take is the symbol setup)

scroll-Symbol_MHv1.hype.zip (1.6 MB)

[michelangelo (Freelancer)]

@MaxZieb and @MarkHunte thank you both!

@MarkHunte

Make sure the size timeline is inside the Symbol

so the symbol is the best solution, thanks

I will do some tests on my project.

thanks again
Michelangelo

[michelangelo (Freelancer)]

@MarkHunte

In this example we also compare the last scrollTop to the current scrollTop.
These are used to try to know if going up or down.

This example is by no means perfect but should give you an idea. ( you probably can look at some of the parallax posts for scroll control but the main take is the symbol setup)

@MarkHunte I tested the project and it works quite well!! thanks again
I've extended the animation time and speed up the reverse speed.

 if ( newScroll < lastScroll ){	  
	  symbolInstance.goToTimeInTimelineNamed(lastPoint - .15 , 'Main Timeline');	
	 }

I also set the responsive layout (in width)

DEMO ONLINE

scroll-Symbol_MHv1b.hype.zip (1.9 MB)

I'm having trouble with the scroll speed.
If I scroll fast enough some animations don't start or stop if the symbol already appears at the top or in the center of the page.

It looks like a trigger delay in the symbol, with many symbols in the page the problem grows. I don't know if it's a bug or normal trigger behavior due to scroll speed.

I would like to try with very large symbols to see how they work
Thanks

[MarkHunte]

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

Introducing Hype Symbol Override Extension - Override Symbol Instance properties -v1.1.4

[ExtensionHeadImage1] Introducing Hype Symbol Override Extension Although Hype Symbol instances share all the same HTML properties, child elements , timelines etc of the Symbol. It is often the case that you want each Symbol's instance to use different parameters when they appear on scene. For example you may be using a Symbol to display images and text but want different Images , Text or Colours for each instance. Hype at present does not have this as a built feature. But this extension …

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)

[h_classen (Hans-Gerd Claßen)]

and did you have a look at @MaxZieb's HypeActionEvents¿

it'll offer (among a ton of other things) intersection-event with minimal scripting involved.
swans.hype.zip (1,8 MB)

//////
regarding intersection i just remembered that i had an old approach that may work completely without scripting: Track Intersections between Hypeelements
though the swans-file above should be easy to manage

[michelangelo (Freelancer)]

@MarkHunte

Yes, There probably is a better way of doing all this.

@MarkHunte grazie! both examples are very useful, customizing the text as well. I don't need it right now, but it's a clever trick.

After some tests i prefer your first solution, just because I can set the trigger position in the scene and i love the behavior of the animation.
While not perfect (due to scroll speed) it is very elegant!

@h_classen

and did you have a look at @MaxZieb's HypeActionEvents¿

Yes thanks!

@h_classen

it'll offer (among a ton of other things) intersection-event with minimal scripting involved.
swans.hype.zip (1,8 MB)

interesting approach, it's an idea to use it in another project, thanks!