Volt 22

Hello everyone, I want the cards in the second section of the webpage - https://voltmeup3.webflow.io/ to move from bottom to top in a zig zag motion on scroll. I'm sorry I didn't include any codepen url, that's because I'm not sure where to start. I already saw that I can do it with motionpath, and that I can create a path with motionpathhelper but I can't see the generated path to tweak in the browser after using motionpathhelper. Additionally, is there a way to tell scrollsmoother to always start from the top of the page on refresh?

Thanks for your response @SteveS. That helped. Problem solved. Thanks again.

Hello SteveS, It gets a bit erroneous when a user scrolls back and forth on that section. https://voltmeup3.webflow.io/

Thanks a lot SteveS.

Hello Everyone, I'm trying to achieve something seemingly simple but I'm having issues. I want to translate an element on scroll. I want the counter container to move upward by 32px and reveal the correct number, when the block on the right passes the ScrollTrigger marker. Right now, it's not working incrementally. It starts from 1 every time, and it doesn't work on scroll up.

Thank you very much @PointC. I really appreciate the time and effort. Thanks again.

Thank you @steveS and @PointC for the replies. @SteveS, please can you elaborate on your solution? Not really sure how to start. @PointC, that was my initial approach, but frankly, I know close to nothing about SVGs.

Hello everyone, I want to achieve the design as is on the webpage: https://decorsystems.com.au/about#approach The implementation of the circular progress design was with svg but I am using div blocks. I already have the small circles in position. How do I achieve the circular progress movement? How do I make the progress bar stop on every small circle?

Alright Cassie, Thanks again for the response, I'll keep tweaking then.

Hello Cassie, How do I align all the headers with equal spacing on either sides of the image. From the sample site, notice how the last header with text content 'genocide' scrolls to align with the header 'when war' towards the end of the animation.

Thank you Cassie. That helped.

Hello From the codepen, I have a scrolltrigger animation where the headers scroll to both sides of a pinned image. I want the headers to scroll and have about 50% of the headers hidden, with the image in-between, and some sort of horizontal center alignment of both the image and the headers when the scroll animation is complete. And I want this to be consistent across all screen sizes. Just like it is on the site: https://defundtigraygenocide.com/ I'm trying to recreate it for practice - https://defund-tigray.webflow.io/ Please, how do I achieve this? Thank you.

Many thanks @akapowl, you've been very helpful.

Hello @akapowl, Thanks for your swift response. The part on posting a minimal demo is well noted. Also, the examples given are ideal, the first one suits my use case perfectly, however, I noticed it scrolls infinitely, any suggestions on how to disable infinite scrolling from that example?

Hello, Newbie alert! I want to achieve a scroll snapping and pinning effect on a website, something similar to what is used on this website - https://skolkovoforbusiness.ru/features/#landscape. I want each section to scroll into 100vh, and to pin. I don't want a user to scroll through several sections at once. I have been able to achieve the snapping effect with help from this community but I can't figure out how to make it pin, and not scroll multiple sections at once. This is my website - https://everwin.webflow.io/. Thanks in advance.

Thank you very much @Cassie, for your help.

Hello I am really new to GSAP. I am looking to use GSAP for full page section scrolling, replicating the same effect on the site - https://skolkovoforbusiness.ru/en/features/#home. Can the scrollTrigger plugin be used to handle this completely? Also, I would really appreciate any recommendations on resources like a learning path to get familiar with the library. What is the best way to learn GSAP?