I’m trying to create a hero moment in which when the user scrolls, a line of copy scrolls up the page while at the same time a logo rotates in behind it centered in the VH and VW. When the bottom of the hero section which is 166VH is reached the logo scrolls off the page with the line of copy which has by then reached the top of the browser window.
I’ve set up the interaction as per several videos I’ve found so that the logo begins at zero degrees at 0% while scrolling into view then ends up at 90 degrees when the scroll action is at 100%.
The issue I’m having is that on loading the site the logo is not at zero degrees rotation but rather at a 30 degree position. On scrolling I am also sometimes getting a flickering effect between 30 degrees and maybe 5 degrees. Then at the moment I’d like the logo to have completed its rotation when the line of copy has reached the top margin of the page the logo finally begins rotating from 30 degrees to 90 degrees, outstaying its welcome for a while before finally scrolling upwards.
I’m wondering if I’ve made a mistake in how I have nested the logo within a container but can’t seem to get to the bottom of it. Any help gratefully received!
See below the public share of the site. I also have a series of static images from my Figma design attached below.
Here is my public share link:
Link
https://preview.webflow.com/preview/pov-site-24?utm_medium=preview_link&utm_source=designer&utm_content=pov-site-24&preview=aa4f9e6eeda24ef3e05542ed7c4aa343&workflow=preview
