今回はJavaScriptのアニメーションライブラリ、『GSAP』を用いてSVGの軌跡を辿るアニメーションを作成してみました。
svgタグの中身を変えるだけで誰でもコピペしてそのまま使用することができると思います。ぜひ最後までご覧いただけると嬉しいです。
目次 非表示
1.実装イメージ
実装イメージは以下の通りです。
See the Pen GSAP-SVG Trajectory by りょーすけ (@s_ryosuke_1242) on CodePen.
コピペしてすぐに実務で実装できるようにしておりますが
注意点としては予め、CDNでプラグインをダウンロードしておきましょう。
必要なファイルは『gsap.min.js』です。
2.HTML
HTMLはコチラの通りになっています。比較的シンプルですね
<section class="animaiton-area">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376.78 65.45" width="690" height="360">
<path class="d" d="M7.92,49.04c-1.73,.58-3.74,1.73-5.69,1.73-1.01,0-2.23-.22-2.23-1.51,0-1.66,3.38-5.69,4.46-7.13,.65-.86,1.15-1.73,2.23-2.02,3.02-.72,6.26-.79,9.29-1.37L36.94,13.83c2.59-3.1,13.18-13.83,16.99-13.83,2.45,0,3.6,2.59,3.6,4.68,0,4.61-5.9,13.03-8.21,17.14,.58,.07,1.3,.22,1.3,1.01,0,1.3-3.02,3.46-4.03,4.18-1.22,.86-4.9,3.74-6.26,3.74-1.3,0-1.66-1.08-1.66-2.16,0-5.4,6.19-13.25,9.65-17.14,.58-.65,.65-1.37,.14-1.37-.94,0-4.03,2.88-12.02,12.02l-14.4,16.49c11.95,2.3,18.15,3.53,28.95,6.12l-3.82,3.82c-4.61,4.61-4.32,4.75-18.43,1.8-6.34-1.37-12.75-2.23-19.23-2.02l-1.58,.72Z"/><path class="d" d="M83.81,39.6c-3.24,4.1-6.41,5.83-11.67,5.83-3.02,3.1-6.55,5.4-11.09,5.4-3.74,0-7.2-3.74-7.49-10.3-.14-5.4,2.52-9,6.55-12.1,3.89-3.17,9.07-5.11,13.47-5.33,1.58-.07,3.96,.65,3.96,2.59,0,1.08-.86,1.51-1.66,1.94,2.16,.58,2.59,2.09,2.59,4.25,0,3.17-1.44,5.69-2.81,8.5,3.17,.58,5.18-2.16,7.42-3.82l.72,3.02Zm-21.96-3.38c-1.58,1.58-2.95,4.39-2.95,6.62,0,2.09,1.37,2.74,3.17,2.74,2.38,0,3.89-1.37,5.54-2.88-.5-1.15-.86-2.09-.86-3.31,0-3.74,3.38-8.28,3.1-8.42-2.45,1.44-5.83,3.17-7.99,5.26Z"/><path class="d" d="M87.98,34.78c-2.52,3.96-5.54,5.83-8.64,8.93l-.29-3.17c1.87-1.51,3.38-3.31,4.75-5.26-1.51-.14-1.94-.72-1.94-2.23,0-5.18,7.34-10.37,9.07-10.37,.72,0,1.3,.58,1.3,1.22,0,.72-.22,1.37-.5,2.02,6.77-.94,10.73-1.8,11.45-.94,1.08,1.37,1.58,2.52,1.73,3.82,0,2.23-1.37,3.31-3.02,4.68-2.09,1.8-5.62,5.33-5.62,8.21,0,1.15,1.15,2.02,2.23,2.02,3.1,0,7.63-4.68,10.01-6.48l.5,2.66c-2.74,3.1-11.02,11.09-15.12,11.09-3.02,0-4.9-2.81-4.9-5.54,0-4.9,3.74-8.71,6.62-12.17l-.14-.14-7.49,1.66Z"/><path class="d" d="M134.71,39.68c-4.39,5.11-12.31,11.88-19.44,11.88-5.26,0-7.7-4.68-7.85-9.43-.29-9.43,10.15-19.08,19.51-19.01,2.3,0,5.18,.58,5.18,3.46,0,3.53-3.53,8.86-17.35,13.39l-.14,1.58c-.22,2.74,2.16,3.67,4.46,3.67,5.11,0,11.16-5.26,14.98-8.28l.65,2.74Zm-8.93-11.59c0-.5-.36-.94-.86-.79-3.6,.94-7.78,4.39-9.72,9.14,6.34-2.16,10.66-7.13,10.58-8.35Z"/><path class="d" d="M158.04,46.08c-1.66,1.58-4.25,4.54-6.7,4.54-1.73,0-3.1-1.3-3.17-3.02-.07-2.09,1.66-5.4,6.34-12.53,.14-.14,.43-.72,.43-.94,0-.29-.22-.5-.5-.5-.72,0-2.3,1.73-2.81,2.23-3.74,3.96-7.78,8.28-11.16,12.46-.79,.94-1.8,2.02-3.1,2.02-3.46,0-4.46-5.62-4.46-8.21,.07-7.06,7.7-16.71,12.02-16.13,1.08,.14,3.24,.14,3.24,1.66s-2.02,3.6-2.88,4.61c-1.3,1.51-2.88,2.81-3.96,4.39-.79,1.08-2.09,2.23-2.09,3.74,0,.14,.22,.65,.5,.65,.36,0,1.22-.94,1.44-1.15,3.53-3.67,16.35-16.49,21.03-16.49,1.94,0,2.95,1.44,2.95,3.31,0,3.17-5.11,9-6.7,11.81l.14,.14,15.99-12.6c.72-.58,2.52-2.02,3.38-2.02,.58,0,1.3,1.73,1.51,2.02,.5,.79,1.3,1.87,1.3,2.88,0,1.22-1.44,2.81-2.23,3.67-5.62,6.19-6.05,7.34-6.12,9-.07,.86,.86,2.02,1.73,1.8,1.51-.36,2.3-.36,11.16-6.41l.43,3.38c-3.38,2.66-13.75,11.16-17.79,11.16-2.16,0-3.67-2.09-3.67-4.18,0-3.6,3.53-8.71,5.33-11.67l-.14-.14-11.45,10.51Z"/><path class="d" d="M229.61,41.04c-3.24,3.96-9.58,10.44-15.05,10.44-4.25,0-6.19-4.9-6.19-8.57,0-8.78,9-17.35,13.32-17.35,1.22,0,3.17,.43,3.17,2.02,0,3.6-7.13,10.01-10.15,12.1-.58,2.95,.5,4.54,3.82,4.54,3.82,0,7.56-3.82,10.44-5.9l.65,2.74Zm-6.91-20.02c0-2.95,3.46-5.54,6.27-5.54,1.29,0,2.38,.94,2.38,2.23,0,2.88-2.67,6.41-5.76,6.41-1.73,0-2.88-1.37-2.88-3.1Z"/><path class="d" d="M227.37,62.43c-.58,1.08-1.87,3.02-3.24,3.02-1.66,0-2.09-1.94-2.09-3.24-.07-3.6,1.51-7.2,4.46-11.38,3.31-4.68,6.91-10.58,11.59-18.51l-.14-.14-11.38,10.87-.29-3.38,19.08-20.52c1.73-1.87,3.02-3.96,5.76-3.96,1.01,0,3.31,.36,3.31,1.73,0,1.58-3.74,5.04-4.9,6.26-2.45,2.59-4.68,5.26-6.12,8.5l.14,.14c3.1-2.23,10.37-6.98,14.26-6.98,1.94,0,3.02,1.51,3.02,3.38,0,3.96-3.6,8.93-11.67,16.06,6.19,.43,7.63-.72,15.34-7.34l.5,3.31c-5.33,5.18-11.81,10.37-19.59,10.37-1.94,0-3.38-.58-5.11-1.44-1.08,.22-2.16,.43-3.31,.43-1.01,0-1.94-.22-2.88-.43l-6.77,13.25Zm22.83-25.49c.79-1.01,1.8-2.23,1.8-3.53,0-.5-.22-1.01-.79-1.01-1.15,0-4.61,2.23-5.54,2.88-2.66,1.94-4.68,4.39-6.62,6.98,2.09-.14,4.1,.07,6.05,.72l5.11-6.05Z"/><path class="d" d="M289.51,38.02l.72,2.74c-4.39,4.39-12.24,10.94-18,10.66-4.82-.22-10.15-2.95-11.45-8.21-.43,.43-.94,.94-1.58,.94-.72,0-1.22-.72-1.22-1.37,0-.94,1.15-1.94,1.73-2.52l15.62-14.33c.14-2.38,1.51-4.68,4.1-4.68,2.16,0,2.59,.65,2.81,2.66,.29,2.74,1.37,5.18,1.37,8.35,0,5.9-4.75,10.3-9.36,13.1,4.61,.79,7.42-1.37,10.94-4.03l4.32-3.31Zm-24.48,1.51c2.66,.14,4.25,2.38,5.62,4.25,4.32-2.66,5.47-3.89,5.69-8.06-.22-1.51-.5-3.46-.94-5.9l-10.37,9.72Z"/><path class="d" d="M310.75,31.25c1.51-1.37,8.57-8.21,10.37-8.21,.58,0,1.37,.22,1.66,3.96,.14,1.73-1.8,3.38-2.95,4.39-2.3,2.09-7.42,7.78-7.42,11.02,0,1.15,.65,1.58,1.8,1.58,2.74,0,8.93-5.04,11.09-6.77l.43,3.1c-3.67,3.53-11.3,11.81-16.63,11.81-2.66,0-4.25-2.23-4.25-4.75,0-2.16,.79-4.18,1.51-6.05l-.14-.14c-2.81,2.45-7.63,8.93-11.59,8.93-3.53,0-5.47-4.03-5.47-7.13,0-6.98,5.4-14.19,10.01-17.21,1.01-.65,1.94-.79,3.17-.79,1.01,0,4.68-.65,4.39,1.51-.14,1.15-2.09,3.17-2.88,3.82-2.23,2.52-2.66,3.17-5.47,5.18-2.23,1.58-3.96,3.17-3.96,6.19,0,.36,.07,1.08,.58,1.08,1.3,0,5.26-2.09,8.64-5.11l7.13-6.41Z"/><path class="d" d="M349.05,46.08c-1.66,1.58-4.25,4.54-6.7,4.54-1.73,0-3.1-1.3-3.17-3.02-.07-2.09,1.66-5.4,6.34-12.53,.14-.14,.43-.72,.43-.94,0-.29-.22-.5-.5-.5-.72,0-2.3,1.73-2.81,2.23-3.74,3.96-7.78,8.28-11.16,12.46-.79,.94-1.8,2.02-3.1,2.02-3.46,0-4.46-5.62-4.46-8.21,.07-7.06,7.71-16.71,12.03-16.13,1.08,.14,3.24,.14,3.24,1.66s-2.02,3.6-2.88,4.61c-1.3,1.51-2.88,2.81-3.96,4.39-.79,1.08-2.09,2.23-2.09,3.74,0,.14,.22,.65,.5,.65,.36,0,1.22-.94,1.44-1.15,3.53-3.67,16.35-16.49,21.03-16.49,1.94,0,2.95,1.44,2.95,3.31,0,3.17-5.11,9-6.7,11.81l.14,.14,15.99-12.6c.72-.58,2.52-2.02,3.38-2.02,.58,0,1.3,1.73,1.51,2.02,.5,.79,1.3,1.87,1.3,2.88,0,1.22-1.44,2.81-2.23,3.67-5.62,6.19-6.05,7.34-6.12,9-.07,.86,.86,2.02,1.73,1.8,1.51-.36,2.3-.36,11.16-6.41l.43,3.38c-3.38,2.66-13.75,11.16-17.79,11.16-2.16,0-3.67-2.09-3.67-4.18,0-3.6,3.53-8.71,5.33-11.67l-.14-.14-11.45,10.51Z"/> </svg>
</div>
</section>3.CSS
次にCSSです。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
width: 100%;
}
body{
width: 100%;
background: #222;
}
main{
width: 100%;
}
.animaiton-area{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
path {
fill: none;
stroke: #fff;
stroke-width: 1px;
stroke-dasharray: 1180px;
}
4.JavaScript
次にJavaScriptです
gsap.fromTo("path",
{'stroke-dashoffset': '1300px'},
{'stroke-dashoffset': '0', duration: 5,stagger:0.2}
)
5.スクロール量と連動
最後に改良版を御覧ください。
GSAPと組み合わせることができる『ScrollTrigger』を使用することでスクロール量と連動したアニメーションを作成することが可能となります
デモは以下の通りです。
See the Pen GSAP-SVG Trajectory-ScrollTrigger by りょーすけ (@s_ryosuke_1242) on CodePen.
今だけ無料プレゼント企画開催中！
現在Twitterにて実務で使ったGSAPの実装事例集を無料プレゼントしています！
・アニメーションナンモワカラン
・何から手つけたらいいのかワカラン
・毎日ツイートしてたWebアニメーションはどうやって実装していたの？
そういった方々の疑問や悩みを解決できるかもしれません
GSAPを使うメリット
・簡単にアニメーション作成が可能
・導入方法が簡単
・プラグインが豊富で特に『ScrollTrigger』が高機能
などなどのメリットがあります！
アニメーション案件等、単価の高い案件ほど使われているライブラリとなります
ぜひ企画に参加して一味レベルが違うコーダーを目指しましょう！
