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:
- it needs to apply to a class of spans, not sections
- 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.
https://marks-groovy-project-2fa056.webflow.io/
Here is my site Read-Only: LINK
(how to share your site Read-Only link)