这篇文章来讲讲如果要实现下图所示的文字动画效果，使用 GreenSock 该怎么做呢？
要实现这样的文字动画，我们需要把文字一个一个单独拎出来使用绝对定位来定好位置，不过这里要花点功夫来定好文字的位置，直接使用绝对定位的话，文字就会挤在一起：
因为使用绝对定位的话，文字就会脱离正常的文档流，所以才会出现上图所示的情况。因此，我们需要来指定每一个文字在X轴的位置，来实现文字的正常的摆放。而文字之间的间距跟所选的字体也有关系，这里我们使用的是monospace字体，那用什么样的方法才能使文字能按正常的文档流的位置摆放呢？
有一个聪明讨巧的解决方案是，把文字先按正常的文档流在页面上呈现出来，然后再拷贝一份使用绝对定位来跟据上面正常的文字的位置来调整要做动画的文字的位置。
第一步：创建文字位置参照物
首先来创建一个文字位置的参照物，即正常的文档流的文字。比如，下图所示你会看到有两个h2包裹的文字元素，第一个是正常的文档流的文字；第二行是使用了绝对定位的。
第二步：文字定位
我们知道使用 getBoundingClientRect 方法可以读取任何DOM元素的位置信息。可以使用这个方法把文字参照物的每一个文字的left值读取出来，然后使用CSS把读取到的值赋给下面要做动画的文字的位置。
当然也可以使用offsetLeft property方法来获取元素的位置信息，但是要记住的是这个方法是以 CSS 像素为单位返回元素相对于页面或由 offsetParent 属性指定的父坐标的计算左侧位置。
const placeSpans = () => {
// for each span in the guide
for (var i = 0; i < guideSpans.length; i++) {
let guide = guideSpans[i];
let animated = animatedSpans[i];
// get the guide client rect
let rect = guide.getBoundingClientRect();
// set the left property of the animate
// span to rect.left
animated.style.left = rect.left + 'px';
}
}
上面代码首先获取正常文档流文字的位置，然后把位置赋值给下面要做动画文字，从而使它的位置跟上面文字的位置保持一致。
第三步：实现动画
基本工作做好，下面就是来实现动画，你也可以参考这个效果来编写动画。我这里也是使用 GreenSock 中的 TweenLite 通过改变文字的 scale 和fade 属性来实现这个简单的动画。
第四步：最终实现
最后，我们得把参照物隐藏掉，然后把动画的文字放在正确的位置，一个酷酷的文字动画就这样实现了。
本文主要是从How to animate individual letters with the correct kerning这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
