Hi guys. I have an unusual request. Is it possible to stretch an image unsymmetrical every time you scroll down? I would like to make a page that you scroll down (ideally until infinitive) and the image will stretch until you will not be able to see the original one. I attach two examples (one with the original image and another one with the image distorted). Any help would be appreciated 
Test.zip (1.4 MB)
Hi Dimitris!
One idea would be to have the scrolling linked to a timeline. So as the user scrolled the "Scale (Height)" would start at "100%" (or whatever) and to go to a higher percentage e.g. 500% as the timeline progressed.
Have not had the time to try this yet myself - but this idea, or a slight variance should work I would think.
A thread about linking the timeline with scrolling.
Notes: In the "Metrics Inspector" panel:
• Make sure that the "Transform Origin 'Y Offset' " is set to "0" for the element.
• Even though You are scaling just the height it might be necessary to un-check the "Constrain ratio" in the "Scale" section.
Hi Jim,
Thank you so much for your reply. I created something like this (I attach the file here). So every time you scroll the mouse wheel the image is distorting disproportionately. I was wondering if I can stretch the image…until infinitive let’s say (I know it sounds a bit stupid). Thank you again so much.
The Mountain Low res.hype.zip (1.5 MB)
of what ?.
A scene depth, or just the image stretching past the scene ?.
Either way all you are going to end up with is black and white lines.!!
Hi Mark,
Just the image stretching past the scene. I don’t really mind ending up with black and white lines 
Give the image an id, in this case ‘mountain’
Skip using the timeline and change the controlTimeline() function to
if (window.addEventListener) {
window.addEventListener("mousewheel", getScrollDir, false);
window.addEventListener("DOMMouseScroll", getScrollDir, false);
}
function getScrollDir(e){
var mountain = hypeDocument.getElementById('mountain')
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
var mountainH = hypeDocument.getElementProperty(mountain, 'height')
console.log(Math.floor(mountainH))
if(delta === -1 ){
hypeDocument.setElementProperty(mountain, 'height',(mountainH *1.41), 1.0, 'easeinout')
}else if (Math.floor(mountainH) > 800){
hypeDocument.setElementProperty(mountain, 'height',(mountainH /1.41), 1.0, 'easeinout')
}else if (Math.floor(mountainH) < 750){
hypeDocument.setElementProperty(mountain, 'height',800 )
}
}Thank you Mark, I will try it!
Another take…
The Mountain Low res JHSv1.hype.zip (1.5 MB)
I kept all your code the same but eliminated the “Size (Height)”, Size (Width)", “Origin (Left)” properties and replaced them with "Scale (Height)"and set the “Scale Height” percentage to “10,000” in the “Metrics Inspector” (no constrain ratio)… could be a higher number.
New “Stretch” Settings
Thank you very much @JimScott. I really appreciate your help. I will try both version (yours and Mark).
thanks again
Thank you very much Jim. I really appreciate your help. I will try both
version (yours and Mark).
thanks again
Dimitris Gkikas
Graphic Designer dimitrisgkik@gmail.com +4915118992050
