Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zimbeta

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) {
  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!!

  • 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.
×