Emoji with ScrambleText Plugin

[sumtype]

Thought I'd post in case someone else finds this useful.  Using v0.4.0 of the scramble text plugin I was able to use multibyte emoji in the chars property string after modifying the following lines in scrambleTextPlugin.js:

 

1)

this.chars = chars.split("");

to

this.chars = [...chars];

 

2)

startText = endText.substr(0, ((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0);

to

startText = [...endText].slice(0,((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0).join('');

 

3)

endText = endText.substr(i, ((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0);

to

endText = [...endText].slice(i,((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0).join('');

 

Animation looks something like this now...

 

scrambleText: { chars: '??????????????????✌✋?✊????❤????????????????????????????????☕???????????????♨?????⛽?⛵?✈?☀☁??☔⚡⛄??✨???⚽⚾??⛳?♠♥♦♣???????☎?????????????✂???♿?⚠?↗↘↙↖♈♉♊♋♌♍♎♏♐♑♒♓❗©®™????㊙??', ... }

 

Makes use of the spread operator which is ES6, browser compatibility is listed near the bottom of this page:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

 

If anyone has improvements they'd be appreciated 

 

Also, haven't tested every emoji, but it seems to be working with ^ so far...

[GreenSock]

I like the idea of making ScrambleTextPlugin Emoji-aware. Here's a preview of the upcoming release (uncompressed): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js (only usable on codepen). Better? 

 

I didn't want to make it limited to ES6, so I did it differently under the hood. Let me know if that works well for you please.  

 

Codepen sample: 

See the Pen 5caeabd5220ed73bc2027bad4786a2a5 by GreenSock (@GreenSock) on CodePen

 

[sumtype]

Thanks!  Looking forward to the release 

 

Also, here's an ES5 version for anybody in the interim.

 

Added at the top

 

function stringWithSurrogatesToArray(s) {
  var output = [];
  for (var i = 0; i < s.length; i++) output.push(0xD80016 <= s.codePointAt(i) ? 0x1000016 + ((s.codePointAt(i) - 0xD80016) * 0x40016) + (s.codePointAt(i + 1) - 0xDC0016) : s.codePointAt(i) < 65535 ? s.substr(i, 1) : s.substr(i++, 2));
  return output;
}

 

then

 

startText = endText.substr(0, ((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0);

 

to

 

startText = stringWithSurrogatesToArray(endText).slice(0,((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0).join('');

 

and

 

endText = endText.substr(i, ((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0);

 

to

 

endText = stringWithSurrogatesToArray(endText).slice(i,((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0).join('');