fromとtoに書く、top-middleとかの意味がよくわからず、書き直してリロードしてを繰り返してたんだけど、ようやく解説してあるサイトを見つけた

https://tr.you84815.space/basicscroll/data.html

middle- bottomと書くと、要素の中央（middle）がビューポートの下部（ bottom）に達した時にアニメーションが始まる、ということらしい。

これで少しは制御しやすくなったかも。

あとはpropsの中身がよくわからない。透明度は.01から.99だからわかりやすいのだけど、ここの

https://codepen.io/electerious/pen/QGNxxx

0から100pxがわかりにくい

position:relativeのことだと思うんだけど、アニメーションしてズレて動くから値が掴みにくい

このへんはもっといじってみないとわかんないな

てか素直にjqueryのを探した方が使いやすいかもしれないけど、他のjsに非依存というのは利点だと思うから、なんとかモノにしたい