Streaming live at 10am (PST)

How to transform elements during scroll via JS?

Hello! I want to animate each individual letter (class=“titlespan”) within each main title text box (class=“project-title”) WHILE the viewer is scrolling.

I want each letter to rotate 90deg on Y (so it becomes invisible) while scrolling is active, and rotate back to 0deg when scrolling is inactive. I can’t do this via interactions, so I tried to play around with some JS.

The script i’m using is currently greyed out in the code. It’s a looper script from https://www.superhi.com/video/skew-on-scroll-effect which skews content along the Y axis. I tried to rewrite the script to do the same thing, but slightly different in 2 ways:

  1. it needs to apply to a class of spans, not sections
  2. the rotation will not be controlled with the amount of scroll. it will always be a single 90deg rotation. —> while scrolling up/down: rotate 90deg — when scrolling stops: rotate back 90deg to initial state.

needless to say, my attempts to rewrite it were unsuccessful. Can anybody help me achieve this?

Cheers,
Mark

Note: there is another script running which simulates a swiping experience during scroll. deactivate it temporarily to get a better view of what’s happening during scroll while you’re checking things out.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

i’d like to add: https://codepen.io/mhedinger/pen/yLJaLmp

additional info can be found in the description via the settings button.

would really appreciate some help. @dram, do you have an idea of what I’m doing wrong here?