GSAP SplitText插件功能测试

包含逐个字母、逐个单词、逐行（3D翻转）渐变以及反转显示等文本特效动画。

gsap, split, text

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3017
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $quote = $("#quote"),
    mySplitText = new SplitText($quote, {
        type: "words"
    }),
    splitTextTimeline = new TimelineLite();

TweenLite.set($quote, {
    perspective: 400
});

//kill any animations and set text back to its pre-split state
function kill() {
    splitTextTimeline.clear().time(0);
    mySplitText.revert();
}

$("#chars").click(function() {
    kill();
    mySplitText.split({
        type: "chars, words"
    })
    splitTextTimeline.staggerFrom(mySplitText.chars, 0.6, {
        scale: 4,
        autoAlpha: 0,
        rotationX: -180,
        transformOrigin: "100% 50%",
        ease: Back.easeOut
    }, 0.02);
})

$("#words").click(function() {
    kill();
    mySplitText.split({
        type: "words"
    })
    $(mySplitText.words).each(function(index, el) {
        splitTextTimeline.from($(el), 0.6, {
            opacity: 0,
            force3D: true
        }, index * 0.01);
        splitTextTimeline.from($(el), 0.6, {
            scale: index % 2 == 0 ? 0 : 2,
            ease: Back.easeOut
        }, index * 0.01);
    });
})

$("#lines").click(function() {
    kill();
    mySplitText.split({
        type: "lines"
    })
    splitTextTimeline.staggerFrom(mySplitText.lines, 0.5, {
        opacity: 0,
        rotationX: -120,
        force3D: true,
        transformOrigin: "top center -150"
    }, 0.1);

})

$("#charsWordsLines").click(function() {
    kill();
    mySplitText.split({
        type: "chars"
    })
    splitTextTimeline.staggerTo(mySplitText.chars, 0.2, {
        color: "#8FE402",
        scale: 0.9
    }, 0.1, "chars")

})

//revert the text back to its pre-split state
$("#revert").click(function() {
    mySplitText.revert();
})

编译

CSS

HTML

包含逐个字母、逐个单词、逐行（3D翻转）渐变以及反转显示等文本特效动画。

gsap, split, text

编辑器支持Emmet

快捷键

包含逐个字母、逐个单词、逐行（3D翻转）渐变以及反转显示等文本特效动画。

gsap, split, text

GSAP SplitText插件实例演示

GSAP+CSS3 DrawSVGPlugin Values使用演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：