SplitText Revert after Resize

[pietM]

Hey Everyone! 

Just trying to revert my splitText animations and triggers after resize. 

What am I missing here? 

 

Thanks, as always! 

See the Pen ZYYwMVY by evryali (@evryali) on CodePen.

[GreenSock]

Check out the docs regarding autoSplit: true - there's a big orange warning: 

Quote

When using autoSplit: true, make sure to create any animations in an onSplit() callback so that the freshly-split line/word/character elements are the ones being animated. If you return the animation in the onSplit(), SplitText will automatically clean up and synchronize the animation on each re-split.

 

But your code doesn't do that: 

// BAD
const mySplitText = new SplitText(split, { 
    type: "words,lines",
    linesClass: "line",
    autoSplit: true,
    mask: "lines",
});

const lines = mySplitText.lines;

// This should be in the onSplit()!!
const splitAnim = gsap.from(lines, {
  duration: 0.6,
  yPercent: 100,
  opacity: 0,
  stagger: 0.1,
  ease: "expo.out",
  paused: true
});

If you add an onSplit(), you'll see that it's being called TWICE - once initially and then again when the fonts finish loading. So the second split creates new lines (and words), but you're only animating the OLD (previous) elements that aren't even in the DOM anymore. See what I mean? 

 

It looks like you're creating a new ScrollTrigger for every ".split" element on every single Resize which seems quite wasteful (you never clean up the old ones). And you're forcing a ScrollTrigger.refresh() on every resize too which is very expensive and completely wasteful because ScrollTrigger already calls refresh() in a debounced way on resize events. 

 

Are you trying to do this?: 

See the Pen LEEqgZe?editors=1010 by GreenSock (@GreenSock) on CodePen.

[pietM]

Thank you, Jack! 

Not sure how I missed that! 

Your prompt help is so appreciated and instructive. 
Thanks again for all!