[Opacity of text-split text on scroll]

Apologies, please can I mark this as resolved. I have combined JS on my site and it has caused this issue. The code seems to work, but any improvement is appreciated.

[Opacity of text-split text on scroll]

Hi. I have created a pen using ScrollTrigger & SplitText to increase opacity on text as you scroll down the page. The pen works fine on CodePen but on my live site the chars revels runs automatically with a stagger and is not connected to scrollTrigger. I get no errors on the live site,  so assume it must be my code.

 

Is the GSAP code correct or is there something obviously wrong with what I am doing?

 

Thanks for any help.

 

I have combined JS on my site and it has caused this issue. The code seems to work, but any improvement is appreciated.

See the Pen eYPKgwG by agsymonds (@agsymonds) on CodePen

[ScrollSmoother + SplitText]

In the above it seems to work, but in codepen it looks terrible?

[ScrollSmoother + SplitText]

I fully expect that this is me doing something wrong so apologies in advance.  I have opacity change on text which is triggered through ScrollTrigger. Each word have been split using SplitText, but it the effect is a little fast when using scrub, so added ScrollSmoother, but the speed doesn't change.

 

 

 

See the Pen eYPKgwG by agsymonds (@agsymonds) on CodePen

[ScrollTrigger targeting sections and then text]

Thank you! 

[ScrollTrigger targeting sections and then text]

Hi, if I add more than one <p> element to each section, only the first <p> element is affected by the .from and not both <p>, although both have the same class.

 

 

I could wrap all <p> elements in a div and target that div, but I assume that there is a simpler way to target each individual <p> element?

[ScrollTrigger targeting sections and then text]

Thanks, this looks like what I need! Greatly appreciate the support.

[ScrollTrigger targeting sections and then text]

Hi,

 

I have repeating section using the same classes, but with different content (backgrounds and copy). I want the background to appear on scroll, and then for the text to also appear, maybe +1 seconds after the background appears. 

 

I have managed to use "gsap.utils.toArray('.section');" for the sections which are triggered on scroll and they work well. If I want do the same for text within each section, do I need to repeat the array process adding a different trigger to target the text class to trigger for each instance or is there a simpler way?

 

TIA

See the Pen BaqrVgg by agsymonds (@agsymonds) on CodePen

[Splittext + Gradient Text, is it possible?]

Hi, is there a way to get this to work with chars instead of lines? I was unable to fork the Codepen, but when I switch lines for chars the gradient element doesn't show at all, just the none gradient text. Thanks.

[Keep ScrollTrigger animation from affecting fixed position after trigger]

Hi, I am trying to get an SVG to shrink and move to top left and then remain there so that it is the main page logo. The initial animation works, but when I scroll back down the page, the SVG jumps back to original Y position. I need it stay in the top left.

 

Any help appreciated. TIA

See the Pen poOJgzM by agsymonds (@agsymonds) on CodePen

[Randomly load the chars]

Perfect, thank you. I am learning through using and looking at the code, so much appreciated help.

[Randomly load the chars]

Just started using GSAP so please excuse the naive question.  Looking at using SplitText, like in the attached Codepen, but wanted to see how it could be altered so that when the letters appear, the order is random,  rather than linear from beginning of the quote to the end?

 

Thanks.

See the Pen JjYwVGm by robbiecren07 (@robbiecren07) on CodePen