Handling the removal and setting of SplitText with scroll smoother effects

[adamatronix]

I have smoother effects applied to the SplitText plugin to create a lag effect for each character in React. But I feel the performance won't be so great on mobile so I want to be able to remove it when it hits a certain breakpoint. Is there a way to remove everything within matchMedia? 

 

React.useEffect(()=> {

let mm = gsap.matchMedia();

if(smoother) {

mm.add("(min-width: 900px)", () => {

 

const split = new SplitText("#discover-copy", { type: "words,chars" });

const chars = split.chars;

 

chars.forEach((char, i) => {

smoother.effects(char, { speed: 1, lag: (i + 1) * 0.002 });

});

 

return () => { // optional

 

};

 

})

}

},[smoother]);

[GreenSock]

Perhaps this will help: 

https://codesandbox.io/s/black-thunder-64rx15?file=/src/App.js

 

I'm not sure if you want the smoother on all sizes or not, but hopefully the demo above shows the structure so you can adapt it however you want.