Volt 22

Thank you for your response, Jack. I followed your suggestion and it was much better. However, it still wasn't very smooth as chart JS uses a different animation engine like you said. So, I used another method, made an SVG and used drawSVG to animate it. Thank you.

Hello everyone, I want to draw a doughnut chart with ChartJS on a scroll as is in the example above. But the chart doesn't turn out smoothly, and I can't seem to undraw the chart on scroll back. Thank you.

Hello @akapowl, Thank you for your reply. I did a scaleX instead, the animation is similar to what I want to achieve.

Hello, How can I rotate an SVG path in the y-axis only?

Wow, very elegant solution Craig. Thanks a lot.

Hello everyone, I have 21 images stacked on top of each other, I want to change the opacity of the images on drag to reveal the image behind. For example 0% to 5% of drag should change the opacity of the first image to zero, 5% to 19% of drag should change the opacity of the second image, and so on. I already have it working to some degree, but the result is inconsistent relative to the speed of dragging.

Thanks a lot Jack. I'll try that out.

Hello everyone, Please how can I go about the interaction on the hero of this website? https://solluminaire.com.sg/product/voli/ What I want to achieve is slightly more different, I'll need to change the colors, maybe from blue to purple to red etc, as it is on https://near.sg/pages/linear-system. I know I have to provide a codepen, but I'm not even sure where to start and that is why I don't have a pen to show now. I just need to be pointed in the right direction, the best way to go about this. I'll provide a pen after that. Thank you.

That was exactly what I wanted @akapowl Thank you.

Hello everyone, Please is there a way to slow down the transition between the different blocks in the demo? I use scrollsmoother and I increased the smoothing but no luck, and I also tried to add (end: () => (window.innerHeight * 1.2)) to the scrollTrigger but it doesn't work as well. Thank you.

Thank you Jack.

Hello everyone, I want to rotate the rounded text around the oval SVG on scroll. How can I achieve this please. Thank you.

Alright. Thank you @Cassie

Hello Cassie, Thank you for the swift reply. However, what happens when I scroll down pass the onEnter marker, and not scroll beyond the onLeave marker but then start to scroll upward. The button will already be green, and not revert until I scroll pass the onEnter marker again.

Hello everyone, I have some color change animations in a site, a fixed button on the top right changes color as the background color of the body changes. When the background of the body changes to yellow, the fixed button background changes to green. Also, the navbar with the logo disappears on scroll down and reappears on scrollup, and the navbar has a green background, so on scroll up when the body background is yellow, the navbar has the same color with the button. I do not want to play the color change animation for the button on scroll up at all. Thank you.

Thanks guys, I'll incorporate your suggestions and try to make a demo. I'll revert if I stumbled upon any issues. Thanks again.

Hello everyone, How can I achieve the effect on this webpage - https://www.beyond-beauty.co/story/the-revolution-of-desire? Where the sound syncs with the transcript, and the opacity of the words change as they are said. I know I'll need SplitText to highlight the words individually, but how can I sync the sound to the words that have been said? Thank you.

Hello everyone, How do I achieve something like what is on the codepen above with the svg lines on scroll on the second section of this website - https://beebeenatural.webflow.io/, I'm not even sure how to properly position the curved path of the svg line behind the jars. Please help.

I was trying to create a minimal demo but I couldn't replicate the issue. However, I managed to solve the problem, I just made the container of the pinned element the pinSpacer. Thank you @Cassie and @GSAP Helper

Sorry I didn't include any demo, it's a live site, and I'm not sure how to replicate the issue.

Hello everyone, On the site - https://www.voltmeup.com/, I have a section with a grid with the header on the left pinned to the top of the viewport, and content scrolling on the right. Without pinSpacing, there seems to be some issues with the sections following, the next section contains a background video, and is supposed to be pinned to the top of the viewport as well, but it doesn't get all the way to the top before it is pinned, and the footer gets cut off as well. But with pinSpacing enabled, there is too much whitespace below the section in question, however, everything else looks fine. How do I get rid of this whitespace caused by pinSpacing.

Thanks a lot, Jack

Hello everyone, I want to replicate the effect on the sites https://dashdigital.studio/, https://joinclyde.com/ where the footer is pinned at the end, and the previous sections scroll to reveal it. Similar to this pen - https://codepen.io/GreenSock/pen/BaowPwo?editors=0010 but not for each section. It seems the rest of the site is in one wrapper and the footer is in a different wrapper. How do I translate this fore wrapper to reveal the footer behind. I'm using gsap scrollsmoother.

Thank you Jack.

Thanks for the reply Jack. The motion I want is similar to what is on this pen but vertical. https://codepen.io/GreenSock/pen/oNNEdRV On scroll up, I want the cards to all scroll towards the right in a staggered fashion, and then towards the left in the same fashion once they each hit the right end of the container.