[Pinned section while other are scrolling]

Thanks, I have fixed it... I add extra class to the element I want to pin, then adjust the start and end value...
 

const faqsContent = gsap.timeline({

scrollTrigger: {

trigger: ".faqs",

start: "top center",

end: "bottom top",

scrub: 1

}

});

faqsContent.from(".faqs-img", { scale: 1.5 });

faqsContent.to(".faqs-mask", { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, 0);

faqsContent.to(".faqs-mask", { duration: 1, scale: 1 });

gsap.from(".faqs .card", {

y: 50,

opacity: 0,

duration: 1,

stagger: 0.25,

ease: "expo.out",

scrollTrigger: {

trigger: ".faqs",

pin: ".sticky",

pinSpacing: false,

start: "top 70px",

end: "bottom bottom",

scrub: 1

}

});

 

[ScrollTriger reveal text color with splitText]

Thanks, I have fixed it.

 

const createSplits = () => {

Array.from(document.querySelectorAll(".section-heading")).forEach(el => {

if(el.motion) {

el.motion.progress(1).kill();

el.split.revert();

}

el.split = new SplitText(el, {

type: "lines,words,chars",

linesClass: "split-lines"

});

el.motion = gsap.from(el.split.chars, {

scrollTrigger: {

trigger: el,

toggleActions: "restart pause resume reverse",

start: "top 100%",

end: "bottom top"

},

y: "0%",

opacity: 0.2,

duration: 0.02,

rotationX: -0,

ease: "none",

stagger: {

amount: 0.8,

from: "start"

}

});

});

}

ScrollTrigger.addEventListener("refresh", createSplits);

createSplits();

[Pinned section while other are scrolling]

That is not what I wan't to do, I want it to pin + the image animation. 

[ScrollTriger reveal text color with splitText]

Please help me with the code snippet, I've tried all my possible best, I don't get it.

[Infinite Scrolling not working]

Hello, I want to create infinite testimonial scrolling, but is not working...

See the Pen abYJBOm by olawale-balo (@olawale-balo) on CodePen

[Pinned section while other are scrolling]

Hello, I want to pin the image while the FAQs is still scrolling, I've tried pin and pin spacing is not working.

See the Pen poLeEMm by olawale-balo (@olawale-balo) on CodePen

[ScrollTriger reveal text color with splitText]

Hello, I want to reveal the text colour with split text on scroll with scroll trigger just like the one on https://www.bequant.com/. I can split the text but I don't get the reveal. Thanks in advance.

See the Pen QWmpKrV by olawale-balo (@olawale-balo) on CodePen

[Text Reveal with ScrollTrigger only.]

Smile, I will join club greensock, but currently I'm learning GSAP its not fr production. Thanks for this ultimate library.

[Text Reveal with ScrollTrigger only.]

No I didn’t, the code pen is a demo from @PointC which is made with ScrollTrigger, SplitText and SmoothScroller. I want to do it with ScrollTrigger only.

[Text Reveal with ScrollTrigger only.]

Hello, I want to achieve the text color reveal with scroll trigger only.

See the Pen MWQJWqJ by PointC (@PointC) on CodePen

[Animate overlay based on scroll]

It didn't work perfectly, the next section create spaces on scroll. 

[Change cursor color]

Thanks, it now work perfectly... I really appreciate.

[Change cursor color]

5 hours ago, Cassie said:

Not entirely sure what you mean by that - but if you want to change the actual color when it's over a certain section you could use event listeners and then tween to a new color.

 

 

 

I can't click or hover on html elements. Example: I can't toggle an accordion.

 

[Animate overlay based on scroll]

Hello everyone,

I'm new here and new to GSAP.  I want to animate the overlay and loop the overlay animation on scroll.

See the Pen JjLROgK by olawale-balo (@olawale-balo) on CodePen

[Show other section on scroll when image is zoom out.]

Thanks, I really appreciate.

[Show other section on scroll when image is zoom out.]

Hello, I want to create something like this https://advanced.team/, I will represent the A (3D) with an image, so on scroll the image should zoom out like that of A and the other section will display. Thanks  

[Change cursor color]

Thanks @Cassie  However its not applying the default css rule when you over on DOM element.