jqueryとsvg_jqueryに基づいたクールなアニメーション効果を実現

 
   
   
    <スクリプト>
        var トマト = $('#トマト')、ブラケット右 = $('.ブラケット右')、ブラケット左 = $('.ブラケット左')、トマト左 = $('.トマト左')、トマト右 = $('.トマト右') 、トマト葉 = $('.トマト葉')、文字 = $('#ihtText パス')、$btnPlay = $('#btnPlay')、$btnSlowMo = $('#btnSlowMo')、$btnReverse = $(' #btnリバース')、tl;
        tl = 新しい TimelineMax();
        tl.set([トマト左], { xPercent: 23.6 });
        tl.set([トマトの葉], { xPercent: 41 });
        tl.set([トマト], {
            xパーセント: 2,
            回転: 13、
            transformOrigin: 'center center'
        });
        tl.set(トマト, { yPercent: -200 });
        tl.set(bracketRight, { xPercent: 200 });
        tl.set(bracketLeft, { xPercent: -200 });
        tl.to([
    ブラケット右、
    ブラケット左
]、0.3、{
    xパーセント: 0,
    イーズ: Power4.easeOut
}, 0.5).to(トマト, 0.5, {
    yパーセント: 0,
    イーズ: Bounce.easeOut
}).to(トマト, 0.2, {
    回転: 0、
    xパーセント: -4
}).to([
    トマト左、
    トマトの葉
], 0.2, { xPercent: 0 }, 'split').to(トマト, 0.2, {
    回転: 0、
    xパーセント: 0
}, 'split').to(TomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');
        $btnPlay.click(function () {
            tl.timeScale(1).seek(0);
        });
        $btnSlowMo.click(function () {
            tl.timeScale(0.2).seek(0.5);
        });
        $btnReverse.click(function () {
            tl.timeScale(1).seek('end').reverse();
        });
        //@sourceURL=pen.js
   

 #イントロ
        {
            高さ: 100vh;
            幅: 50%;
            マージン: 0 自動;
            オーバーフロー: 非表示;
        }
        #イントロ #ihtロゴ
        {
            位置: 絶対;
            トップ: 50%;
            左: 50%;
            高さ: 100%;
            幅: 50%;
            変換: 変換(-50%, -70%);
        }
        #intro #ihtText
        {
            幅: 100%;
            位置: 絶対;
            トップ: 50%;
            幅: 40%;
            左: 50%;
            変換: 変換(-50%, 80%);
        }
        .ボタン
        {
            位置: 絶対;
            下: 20px;
            左: 20px;
            リストスタイル: なし;
            マージン: 0;
            パディング: 0;
            右: 20px;
        }
        .ボタン
        {
            float: 左;
            margin-right: 10px;
            パディング: 10px 15px;
            ボーダー: 1px #ebebeb ソリッド;
            テキスト装飾: なし;
            色: #222222;
        }