Search the Community
Showing results for tags 'autosplit'.
Found 1 result
-
I'm having an issue with my SplitText and ScrollTrigger setup. The effect is to paint each line blue as the user scrolls. It renders perfectly on Chrome but on Safari (desktop and IOS), the line breaks happen in weird places. I recreated the animation in CodePen but couldn't replicate the issue in Safari, so not sure what's happening. For further context, I am building in WordPress using Bricks Builder, so there maybe a script conflict? Not sure, but any help is greatly appreciated! CODE: export function highlightTextOnScroll() { gsap.registerPlugin(ScrollTrigger, SplitText); document.fonts.ready.then(() => { SplitText.create(".scroll-highlight", { type: "lines", linesClass: "line", autoSplit: true, onSplit: (instance) => { const animations = instance.lines.map((line) => { return gsap.to(line, { backgroundPositionX: 0, ease: "none", scrollTrigger: { trigger: line, scrub: true, start: "top center", end: "bottom center", }, }); }); return animations; }, }); }); } CHROME: SAFARI:
