Split Text using custom font

[NickWoodward]

2 hours ago, Rodrigo said:

// snip

mb - I saw the capes in both your avatars and thought greensock was also you. Thanks as well, will look at both 😊

[NickWoodward]

In case this helps someone in the future -  Typescript types for the split text helper - not 100% sure they're correct, but I've applied the rigorous "it works" standard 🙂
 

 type SplitTarget = Element | Element[] | NodeListOf<Element> | NodeListOf<Element>[] | string;

  type SplitTextAnimationConfig = {
    type?: "chars" | "words" | "lines" | "chars,words" | "words,lines" | string;
  
    autoSplit?: boolean;
  
    charsClass?: string;
    wordsClass?: string;
    linesClass?: string;
  
    onSplit: (self: {
      chars: HTMLElement[];
      words: HTMLElement[];
      lines: HTMLElement[];
      element: HTMLElement;
    }) => GSAPTween | GSAPTween[];
  };

  function splitText(target: SplitTarget, config: SplitTextAnimationConfig) {
    let animation: GSAPTween;
    let onSplit = config.onSplit;
    
    config.onSplit = self => {
      let parent;
      let startTime;
      if(animation) {
        parent = animation.parent;
        startTime = animation.startTime();
        animation.kill();
      }
      animation = onSplit && onSplit(self);
      parent && parent.add(animation, startTime || 0);
    }
    
    SplitText.create(target, config);
    return animation;

  }

 

[NickWoodward]

Hmmm, actually codesandbox was just being lenient - does anyone know what the return type of onSplit should be? I've got it as GSAPTween, but it doesn't return anything. I could return the animation, but I don't want to mess with how the function actually works. I could change the return type to void, but then it can't be assigned to the animation property.

 

[NickWoodward]

Not 100% sure, but think this is the fix:

 

type SplitTarget = Element | Element[] | NodeListOf<Element> | string;

type SplitTextAnimationConfig = {
  type: "chars" | "words" | "lines" | "chars,words" | "words,lines" | string;
  
  autoSplit?: boolean;
  
  charsClass?: string;
  wordsClass?: string;
  linesClass?: string;
  
  onSplit: (splitText: SplitText) => gsap.core.Tween;
};
  
export function splitText(
  target: SplitTarget,
  config: SplitTextAnimationConfig
) {
  let animation: gsap.core.Tween | undefined;
  let onSplit = config.onSplit;
  
  config.onSplit = (self) => {
    let parent;
    let startTime;
    if (animation) {
      parent = animation.parent;
      startTime = animation.startTime();
      animation.kill();
    }
    animation = onSplit && onSplit(self);
    parent && parent.add(animation, startTime || 0);
  
    return animation;
  };
  
  SplitText.create(target, config);
  return animation;
}