Hey there developers and designers,
I need your help with a tricky animation issue that I’m trying to resolve. I’m currently working on a website for a client, and they want something similar to the explanatory section of the desktop version of https://vaynermedia.com on their website. Specifically, they want the progress bar and headers to be sticky to the left, while the paragraphs scroll through to the right.
Like on Vaynermedia, we need an animation executing all the steps of switching between 2 points at once for everything else to work smoothly. Therefore, a ‘while scrolling in view’ trigger only might work as a temporary workaround. (They also want the text to the right to be pushed up and out and the next one to be pushed in (in addition to scrolling) and vice versa, when the points switch. I’m confident though that this can work once I can replicate what Vaynermedia has.)
I have been able to get it to work one way, where scrolling down switches the points, but when scrolling back up, the animations seem to fire all at once and cause problems. I’ve tried many different solutions, including wrapping it in divs so there aren’t multiple animations trying to affect the same div, using different trigger elements and offset amounts, and even developing a separate animation trigger for scrolling up that only appears at the right moments. Unfortunately, none of these solutions have worked so far, and I always end up with objects not behaving how I want them to, such as explanatory text on the right being on top of each other.
If anyone has any ideas on how to make this animation work both ways within Webflow’s interface, custom code, or a plugin, I would greatly appreciate your help. It would be really cool to achieve this effect in Webflow.
Thank you all in advance!
Here is my public share link (it’s the second section): LINK
In case you can’t see something, I’ve published my anonymised forum version: LINK