Scrolling animation on title

Hi all,

I’m new to this so I’m sorry if this has been answered… I’m trying to create a scroll animation. I’m sure it’s relatively simple but I can’t seem to get my head around it.

What I’m trying to achieve
Simply put, I want to have the title at the top of my page begin to rotate and reduce in opacity when I start to scroll.

The challenge
At 0% (start of animation) I set the Opacity at 100% and rotation to 0 on X,Y & Z. On 100% I’ve set the Opacity to 0% and the rotate on the Z axis to 15.

However when ever I preview the page it automatically jumps to the 100% state without scrolling.

Is this because the section is 100vh? and technically the 100% state is already on the page?

Here is my public share link: LINK
(how to access public share link)