Opacity of text-split text on scroll

[agsymonds]

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

Edited February 5 by agsymonds
Resolved

[GSAP Helper]

Without a minimal demo that clearly illustrates the problem, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. 

 

At the very least, please provide a URL where we can see the problem. We generally can't troubleshoot live sites, but it's better than nothing. Perhaps the console log will provide some clues. 

[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.

[GreenSock]

I don't notice any obvious problems, but this looked slightly odd: 

start: "top 30%",
end: "bottom bottom",

That'll work fine as long as the trigger element is MORE than 70% as tall as the viewport, otherwise the end will be BEFORE the start.

 

Happy tweening, and thanks for being a Club GSAP member! 💚