[Gsap scrolltrigger with chartJS]

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.

[Gsap scrolltrigger with chartJS]

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.

See the Pen KKJWgLJ by Iam_Jesse (@Iam_Jesse) on CodePen

[Rotate SVG Path in y-axis]

Hello @akapowl,

 

Thank you for your reply.

 

I did a scaleX instead, the animation is similar to what I want to achieve.

[Rotate SVG Path in y-axis]

Hello,

 

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

See the Pen dyQOjmN by Iam_Jesse (@Iam_Jesse) on CodePen

[Change opacity of images onDrag]

Wow, very elegant solution Craig.

 

Thanks a lot.

[Change opacity of images onDrag]

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.

See the Pen PoyemoO by Iam_Jesse (@Iam_Jesse) on CodePen

[Change images on control scrub]

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

[Change images on control scrub]

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.

[Layered pinning delay]

That was exactly what I wanted @akapowl

Thank you.

[Layered pinning delay]

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.

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

[Rotate Text Around Oval SVG Path on Scroll]

Thank you Jack.

[Rotate Text Around Oval SVG Path on Scroll]

Hello everyone,

 

I want to rotate the rounded text around the oval SVG on scroll.
How can I achieve this please.

 

Thank you.

See the Pen OJvGpYE by voltmeup (@voltmeup) on CodePen

[Change button color when navbar is visible]

Alright. Thank you @Cassie

[Change button color when navbar is visible]

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.

[Change button color when navbar is visible]

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.

See the Pen poLqYYG by voltmeup (@voltmeup) on CodePen

[Syncing sound with transcript gsap]

Thanks guys, 

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

Thanks again.

[Syncing sound with transcript gsap]

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.

[Draw svg text with scrolltrigger]

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.

[Pinspacing leaves too much whitespace below section]

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

[Pinspacing leaves too much whitespace below section]

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

[Pinspacing leaves too much whitespace below section]

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.

 

[Pin last section and reveal on scroll]

Thanks a lot, Jack

[Pin last section and reveal on scroll]

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 - 

See the Pen BaowPwo?editors=0010 by GreenSock (@GreenSock) on CodePen

 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.

See the Pen qBxvjGy?editors=1000 by voltmeup (@voltmeup) on CodePen

[Move cards in a zig zag motion on scroll]

Thank you Jack.

[Move cards in a zig zag motion on scroll]

Thanks for the reply Jack.

The motion I want is similar to what is on this pen but vertical. 

See the Pen oNNEdRV by GreenSock (@GreenSock) on CodePen

 

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.