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 …

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.goToTi…

Check this out Scroll control timeline

@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 (“controlT…

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

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

I'm working on a similar project, but I have a problem :neutral_face: 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…

This might also work for you: [image] Hype Action Events Extension Project 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…

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 V…

@MaxZieb and @MarkHunte thank you both! [image] 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

[image] 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 m…

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 sligh…

Change image size when scrolling down

Using JavaScript with Hype

MaxZieb (Loves Hype) February 13, 2023, 3:17pm 8

This might also work for you: