Can I access the text content of the divs created by SplitText

[Lucir]

Hi,

I'm trying to access dives created by SplitText and be able to read and change the content. I wanted to create a fraction embedded in text and have the text properly adjust itself around the fraction using SplitText. I also want to be able to read and write the text content of the divs. For that I was trying jquery's text() and html() methods, but the alert I placed in my code says undefined.

can somebody please look at my code in codepen?

I'm using Adobe Edge Animate as the main wrapper.

See the Pen rApJv by GreenSock (@GreenSock) on CodePen

[Diaco]

Hi Lucir 

 

unfortunately , i can't understand completely what you looking for / your goal .

 

but i think these can help you :

 

- Get original innerHTML/Text by this :

 console.log( mySplitText._originals[0] )

- Reverts to the original content ( the innerHTML before the split ) by this : .revert(); 

mySplitText.revert(); 

See the Pen gFHza by GreenSock (@GreenSock) on CodePen

 

- Change innerHtml , split again and restart the timeline/tween with something like this : 

See the Pen GgLoxV by MAW (@MAW) on CodePen

[Lucir]

Hi, Diaco

I want to be able to change the fraction on say the click of a button or pick random numbers to replace the old ones. It seems you're suggesting I read the innerHTML before the split or after revert. I'll try that.

Thank you, Diaco

Luci

[Diaco]

i think this's another useful method : 

See the Pen GgLoxV by MAW (@MAW) on CodePen

  var newText =  mySplitText._originals[0].replace(/\s/g,' ♥ ');// replce whitespace with ♥ or whatever
  document.getElementById('quote').innerHTML= newText ;

and don't forget you can use another GSAP great pugin : Textplugin with SplitText together

 

Textplugin Doc : http://greensock.com/docs/#/HTML5/Text/TextPlugin/

 

something like this : 

See the Pen WbWwQj by MAW (@MAW) on CodePen

[Carl]

I applaud Diaco's ingenuity (good find)

 

However, I'd recommend staying away from properties that are preceded with an underscore (like _originals) as they are intended for use by the engine (with some exceptions like _gsTransform.

 

I think you can get a similar effect by just revert()-ing a SplitText instance, changing the text in the original DOM node and then recreating a new SplitText like:

http://codepen.io/GreenSock/pen/EaJKwM?editors=001