HP製作で、スクロールしてきたら右側から線が流れてくるアニメーションを作りたい

参考サイトを載せます。
https://www.fujikougei.info
上記のサイトのWORKの所のように
スクロールしてきたら右から線が出てくるアニメーションを
作りたいのですが、全然実装できなくて困っています。
単純に左から右へならできたのですが、右から左へというのが
うまくできません。
どなたかご教授頂ければ幸いです。
宜しくお願い致します。

追記

実際にコーディング出来たのですが、
safariだけでは動くのですが、ie. chrome 等で動きません。

原因がわかれば教えてください。

HP
http://sample.heartwood.work/yf/

html

css

.draw-line-g {
position: relative;
display: inline-block;
text-decoration: none;
width: 100%;
}

.draw-line-g {
margin-bottom: 0;
}

.draw-line-g::after {
border-bottom: solid 2px #000;
bottom: 0;
content: "";
display: block;
position: absolute;
right: 0;
transition: all .3s ease;
-webkit-transition: all .3s ease;
width: 0;
}

.isAnimate2-1::after {
width: 100%;
}

script

で実装しております。

ご教授頂ければ幸いです。

m.ts10806

2019/07/08 07:07

>単純に左から右へならできたのですが、右から左へというのがうまくできませんそのコードをご提示ください。できたという「左から右へ」のもの「うまくできない」というもの。「うまくできない」ものは何がどううまくいかないのか（エラーなどもあわせて）具体的に記載してください。 ※それに参考サイトがあるのでしたらブラウザデベロッパツールから辿れることも多いかと思います

kyo-web

2019/07/09 00:20

すみません遅くなりました。実際にコーディング出来たのですが、 safariだけでは動くのですが、i.e. chrome 等で動きません。原因がわかれば教えてください。 HP http://sample.heartwood.work/yf/ html <table class="a"> <tr> <th>WORK</th> <td><div class="draw-line-g"><P></P></div></td> </tr> </table> css .draw-line-g { position: relative; display: inline-block; text-decoration: none; width: 100%; } .draw-line-g { margin-bottom: 0; } .draw-line-g::after { border-bottom: solid 2px #000; bottom: 0; content: ""; display: block; position: absolute; right: 0; transition: all .3s ease; -webkit-transition: all .3s ease; width: 0; } .isAnimate2-1::after { width: 100%; } script <script> $(window).on('scroll', function() { var elem = $('.draw-line-g'); var isAnimate = 'isAnimate2-1'; elem.each(function() { var elemOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); if (scrollPos > elemOffset - wh + (wh / 4)) { $(this).addClass(isAnimate); } }); }); </script> で実装しております。ご教授頂ければ幸いです。

m.ts10806

2019/07/09 00:21

質問は編集できますので状況を追記してください。

kyo-web

2019/07/09 00:27

追記させて頂きました。