How to Create Refs for React in SplitText

[zimbeta]

Hi team. I am really hoping this is possible because I've got a fairly complex animation going and I am trying to re-factor it with React. 

 

In order to target the individual letters in my SplitText word after my component mounts, can I create Refs in a similar way that a character class is assigned below once the word is split into letter divs? Thanks so much! 

 

 var tl = new TimelineMax({ });
    var splitTitle = new SplitText( title, {
      type: 'words,chars',
      position: 'absolute',
      charsClass: 'letter title-++'
    }),
      chars = splitTitle.chars;

[Rodrigo]

Hi, you can create the split text as a property in the component's class, in the constructor:

 

constructor (props) {
  super(props);
  
  this.title = null;
  this.titleChars = null;
}

Here this.title should point to a ref in the render method

 

Then in the component did mount method you can create the SplitText instance and assign the chars to the property created in the constructor:

 

componentDidMount () {
  const mySplit = new SplitText(this.title, {
    type: "words, chars",
    position: "absolute"
  });
  this.titleChars = mySplit.chars; // array of DOM elements (<div> tags)
  
  TweenMax.staggerTo(this.titleChars, 1, {x: 10, y:-10, rotation: 180, autoAlpha: 0}, 0.1);
}

 

That is working for me, give it a try and let us know how it works.

 

Happy tweening!!