Streaming live at 10am (PST)

Rotation on scroll


#1

How would I make the white earth icon on my site rotate when scrolling down the page?

http://cloverbay.webflow.io/

https://preview.webflow.com/preview/cloverbay?utm_source=cloverbay&preview=a61cc909dfc36fdafc7018a76dcb7230


#2

Hi @humanandcompany

Within the ‘While Page is Scrolling’ interaction (that you have already created)

  1. Create a ‘Play Scroll Animation’ (I named mine ‘WhiteEarthRotate’)
  2. Select the action: Rotate
  3. Define the rotation values on the z-index (I used -180 to start, and 360 to end)

Hopefully, images show settings a little clearer.

Scroll%20Animation%20Setting

Keiran