// MySplitText.tsx
const ref = useRef<HTMLDivElement>(null)
const splitText = useRef<SplitText>()
useEffect(() => {
let ctx = gsap.context(() => {
splitText.current = new SplitText('.text',{
type: 'chars'
})
},ref)
},[])
<div ref={ref}>
<p className="text">My Text</p>
</div>
/**
* Root component- App.tsx
*/
<div>
<MySpliteText/>
<p className="text">My Text at root component</p> // <-- this is got selected
</div>
Does someone also experience this scenario? The selector inside the context is leaking outside its scope, or is there something wrong with instantiation of the `SplitText` plugin? I have to pass it to a `ref` so I can use it on a callback animation.