Jump to content


How to Create Refs for React in SplitText

Recommended Posts

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;

Link to comment
Share on other sites

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


constructor (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!!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.