How to Make Objects/Elements Rotate Whenever a Page is Scrolled Down or Up

[leckwood]

Hey all. I’m relatively new to Hype (and website design in general) and I was just wondering if it’s possible to make objects rotate (on their center axis) as a page is scrolled down or up? For example, I’m thinking of making my menu icon rotate clockwise as my page is scrolled downward and then rotate back the opposite direction (i.e. counter-clockwise) whenever the page is scrolled upwards. How would you go about setting this up in Hype Pro?

[MarkHunte]

There are plenty of example using scroll on the site which you can search for.

This quick example uses two bits of code from @DBear.

Creating a Fixed Header Image

<style> .HYPE_scene:not(.HYPE_element) { overflow-y: visible !important; } #element { position: fixed !important; } </style> Make your document responsive (check scale width 100%) Make sure your elements are pinned to where you want them to be document with example fixedHeader.zip (20.6 KB)

Scrolling and animation linked to scrolling

Hi Trey Here was something I was working on. It shows a simple function on scene load that dynamically updates the position in the animation timeline as the window is scrolled. So as you scroll up and down the timelines move back and forth. Also added some other on enter and exit viewport actions. This might give you an insight in to how to adapt it to suit your needs. parallax-vDBear.zip (2.5 MB)

fixedAndOnScrollSpin.hype.zip (18.1 KB)