I’m trying to create a rotating progress wheel that reveals different sections of the wheel based on the section of the page. I have the animation working when descending the page, but I can’t figure out how to reverse it when moving back up. I’m currently using “scroll into view” as the interaction trigger, but I’m not confident that is the correct interaction to use. Adding the “scroll out of view” just messes up the animation completely. I also have scrollify embedded to snap scrolling to sections.
Hi @btmac525, I believe the best way to do it is by creating a interaction that activates with each “section”, so the progress register a % of the circle.
If you do it with the whole page you won’t be able to assign parts of the circle to sections on all devices, it will be messy. But if you do it by section I believe it could work great!
I currently have the interactions broken out by section with “scroll into view”, but I can’t get it to revert back smoothly when scrolling back up. I wanted it to have the smooth rotation when navigating the page both up and down, but I think I’ll just have to have each segment of the wheel disappear when scrolling out of view then reappear on the next section without any rotation.
I originally tried using the “while page is scrolling” interaction and do it by %, but as you mentioned, it was an even bigger mess.
@btmac525 I just saw your website and it seems you are looking to replace image by image, when its much better to make it with lottie animations.
You can go to Lottieflow | Explore or https://lottiefiles.com/ for lottie animations that may work with what you are trying to do.
The problem with the images, is that you must overflow one in top of the other for a smooth transition. It’s doable, but harder.
