Change image size when scrolling down

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 :slight_smile:

Check this out Scroll control timeline


Hype project: (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): (145.7 KB)

1 Like

Thanks @JimScott

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

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');

My mother always told me not to hang out with userAgents :eyes: