cssで動かしたsvgアニメーションを可視化された段階で動かす方法

Question

illustratorでsvgファイルを作成し、それをCSSでアニメーションをつけたのですが、
サイトを読み込んだ時点でsvgアニメーションが始まってしまい、スクロールした際にはすでにアニメーションが終わってしまいます。

inview.jsなどもを使ってみたのですが、やはり同じ結果でした。
スクロールして可視化された際にアニメーションを行うのはどうしたらいいでしょうか？
初心者な質問で申し訳ありませんが、ご教授いただけると助かります。

<svg class="sgwid" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1366px"
	 height="630.063px" viewBox="0 0 1366 630.063" enable-background="new 0 0 1366 630.063" xml:space="preserve">
<g id="line2">
	<path class="st0 path" fill="none" stroke="#85B1DF" stroke-width="2" stroke-miterlimit="10" d="M-27,215.825c0,0,165.392,193.585,340,276
		c500,236,870.225,108.336,922-107c44-183-94.979-397.462-342-341c-280,64-284,424-70,528c162.503,78.974,336.154,15.055,433.5-75.5
		c129-120,180.5-320.5,180.5-320.5"/>
</g>
<g id="line1">
	<path class="st0 path" fill="none" stroke="#85B1DF" stroke-width="2" stroke-miterlimit="10" d="M-22-4.175c0,0,247.466,576.368,915,621
		c344,23,524-245,524-245"/>
</g>
<g id="gazou">
		<image class="grap" overflow="visible" width="773" height="773" xlink:href="image/home/maruphoto01.png"  transform="matrix(0.7088 0 0 0.7088 682.3213 41.3877)">
	</image>
</g>
<g id="maru">
	<path class="circle" fill="#D7092F" d="M1022.75,149.733c0,77.551,62.867,140.418,140.418,140.418s140.418-62.867,140.418-140.418
		c0-77.551-62.867-140.418-140.418-140.418S1022.75,72.182,1022.75,149.733"/>
</g>
</svg>

SVGはhtml内に記述。

/* SVGアニメーション用CSS 共通 */
.path{
	opacity: 1;
	stroke: #85B1DF; /* アウトライン色 */
	fill: none; /* 塗りの色 */
	stroke-width:1; /* 線の太さ */
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	animation: DASH 3s ease-in alternate forwards;
		-webkit-animation:DASH 3s ease-in 0s forwards;
		-o-animation:DASH 3s ease-in 0s forwards;
	animation:DASH 3s ease-in 0s forwards;
}

@keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}


.grap {
	animation: fadeIn 3s ease 2s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
	opacity: 0;
}

.circle {
	animation: fadeIn 2s ease 2.2s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
	opacity: 0;
}

.inner {
	animation: fadeIn 2s ease 3s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
	opacity: 0;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 0.9}
}

他に必要な情報があれば記載します。
よろしくお願いします。

Answer 1

「可視範囲 アニメ」とかでググるといろいろヒットします
たとえば

• jQuery – inview.js で画面に表示されたタイミングでアニメーションを開始する ｜ Gimmick log

Comments

[退会済みユーザー]

ご回答ありがとうございます！
私もこのサイトは拝見したのですが、この場合だとsvgをjavascript内に書き直す感じになるのでしょうか？

Answer 2

inview.jsで対象要素がウィンドウに入ったときにSVGに対して
アニメーション処理を書いたクラスを付与してあげるとよいのではないでしょうか？

$(function() {
  $('.sgwid').on('inview', function(event, isInView) {
    if (isInView) {
      //表示領域に入った時
      $(this).addClass('animation-start');
    }
  });
});

.sgwid.animation-satrt .path{
    opacity: 1;
    stroke: #85B1DF; /* アウトライン色 */
    fill: none; /* 塗りの色 */
    stroke-width:1; /* 線の太さ */
    stroke-dasharray: 3000;
    stroke-dashoffset:3000;
    animation: DASH 3s ease-in alternate forwards;
        -webkit-animation:DASH 3s ease-in 0s forwards;
        -o-animation:DASH 3s ease-in 0s forwards;
    animation:DASH 3s ease-in 0s forwards;
}

.sgwid.animation-satrt .grap {
～～～

Comments

[退会済みユーザー]

ご回答ありがとうございます！
この方法がいいなぁと思ったのですが、入れてみたところアニメーションが動かなくなってしまいました…。
いただいた通りhtmlにjavascriptを、cssには[.sgwid.animation-start .path～]を追加してあります。

<script>
$(function() {
$('.sgwid').on('inview', function(event, isInView) {
if (isInView) {
//表示領域に入った時
$(this).addClass('animation-start');
}
});
});
</script>

/* SVGアニメーション用CSS 共通 */
.sgwid.animation-start .path {
opacity: 1;
stroke: #85B1DF; /* アウトライン色 */
fill: none; /* 塗りの色 */
stroke-width:1; /* 線の太さ */
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: DASH 3s ease-in alternate forwards;
-webkit-animation:DASH 3s ease-in 0s forwards;
-o-animation:DASH 3s ease-in 0s forwards;
animation:DASH 3s ease-in 0s forwards;
}

難しいです( ；∀；)

[Yoh]

検証しておらずすみません、、
SVGタグに対して直接addClassできないみたいですね。。

【HTML】
<div class="svg-wrapper">
<svg>～～</svg>
</div>

として
【JS】
$(document).ready(function() {
$('.svg-wrapper').bind('inview', function(event, visible) {
if (visible) {
//表示領域に入った時
$(this).addClass('animation-start');
}
});
});

【CSS】
.animation-start .path{
～～～
}

のようにSVGをラップするものがあれば正常に動くみたいでした。

ただし、
アニメーションスタート前に描画完了後の状態が一瞬見えてしまっている状態になるので
.path {
stroke-dashoffset:0;
opacity: 0;
}

.grap,
.circle {
opacity: 0;
}
このような感じで初期状態では表示を隠しておく必要がありそうです。

[退会済みユーザー]

いただいたコードで無事に動きました！！
なかなかできずに慌てていたので、とても嬉しいです( ；∀；)
ご丁寧にありがとうございました！