【webサイト制作】jQueryで、スクロールしたら右から線が伸びてくるコードが分かりません

実現したいこと

・JQueryを使って、スクロールして可視領域に入った際に右側から左へ線が伸びてくるようにしたいです。

前提

[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法
HTML/CSS・JQueryでwebサイトを作っています。
上記のサイトを参考にしてすでに左側から伸びる線は作成することができました。
DEMOのリンク先にある右側から伸びる線のコードが分からず書き換えられない状態です。

※当方はjQuery/javascript初学者で、jQueryのコードがいまいちわかっていないです。
※今のところはHTMLとCSSを基本的には理解できています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

【HTML】 <div class="contents"> <div class="line"> 　</div> </div> 【CSS】 .contents { position: relative; width: 50%; height: 25vh; } .line { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 0; height: 1px; background: #000000;　 } 【JS】 $(function () { $('div.line').each(function () { var $win = $(window), $winH = $win.height(), $connect = $(this), position = $connect.offset().top, current = 0, scroll; $win.on('load scroll', function () { scroll = $win.scrollTop(); current = (1 - (position - scroll) / $winH) * 2 * 100; if (current > 99.9) { current = 100; } if (scroll > position - $winH) { $connect.css({width: current + '%'}); } }); }); });

試したこと

jQueryのほうのコードは分からないなりに、数値の変更などをしていましたが理解が及ばずです・・・
勉強が追い付かずすみませんが、身内のサイト作りに行き詰っている状態なのでご教授いただけましたら幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。