agsymonds

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.

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.

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

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.

Thank you!

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. https://codepen.io/agsymonds/pen/BaqrVgg 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?

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

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

How are you set up? Message me if you want to run through what I use and set up

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.

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

Has anyone managed to get this method to work. My first GSAP animation worked when I placed everything on the actual page (see image), but this method doesn't seem to work for other animations. If I try the above method nothing seems to happen and the animations don't work. Have tried most of the methods on Youtube so assume it must be only me!

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

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.