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.