Fake native scroll? How can we achieve this sort of a scroll animation?

Is it possible to play scenes and timelines when the user is scrolling down in a fixed height document? I couldn’t find any ‘scroll’ event in hype (except for events related to viewport entry and exit for elements which does not hold true for our situation since no element actually comes into view because the document height is fixed)

These are the sort of animations that we are going for as the user tries to scroll down or up:


   .fixed {position: fixed !important; }

Just a little test. This might be useful but it has a different layout.
Does not use javascript, CSS only.

Custom Behavior + Viewport animations


fixed_synbol.hype.zip (153.7 KB)

Thank you… It is an interesting adaptation but it wont work for scenarios like the second animation link I had provided… That is because it relies on having areas outside the current viewport…

Whereas in our case we need our document to be scaleable to stretch to fit the entire viewport so that it fits all screen resolutions.

Also there would be an issue of ‘bouncing’ back visually which is not acceptable since we would like to have a seamless flow into the next scene/timeline that seems to scroll down to the next scene without any bounce…

Any other ideas/solutions? Any way to trigger an event if the user tries to scroll off the screen? Anything else?

Those two example you gave look great.
And are probably doable…
But the first one makes the user have to guess what to do rather than point out to scroll or make it intuitive.

The second, does point it out to scroll. But Thats a lot of scrolling. And although I like all the animation it was winding me up having to scroll so much

The first link countered users getting repetitive strain syndrome :smile: by offering a navigation clicker down the side.

Just saying… :expressionless:

Agree with you!
How would we execute both these on hype?
What sort of an event is triggered when the user is scrolling?

Any ideas?

I cannot look at it at the mo. myself as I am not at my computer…

But google window scroll event, or search this site.

Examples are different, I worked on the first

True. Would really appreciate if you could crack the second one too for me. :smile:

Thanks for the great template @michelangelo !

When I checked the examples I see that the second example is not playing in Firefox. Safari works ok, but on mobile Safari the comic book hangs after several slides (iPhone 5S).
The first example is behaving totally different on Mobile than on the desktop.

thank you @Olav

This is quite normal in small devices you must turn off any animation, CSS effect and so on.
Both examples are made by professionals.
For example the parallax behavior is not supported or is heavy to manage.
BTW: Hype is amaging for this porpuse, very flexible.