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 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?


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:

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?