マスクアニメーションを行いたいときはSVGやCanvasでマスクを作りますが、その後横スクロールをしたいときは横長の画像を利用します。
その場合にマスク位置を決めるのは簡単そうに見えて実は少しテクニックが要ります。

これはSVGやCanvasの場合、要素の比率というものが関係してくるため単に表示画面の中心に来るようにするだけでは失敗します。
では、どのようにするのかを実際に試したのが下記になります。

See the
Pen
画面より大きい画像で画面の中心をマスクする by Nobuyuki Kondo (@arcone-nk)
on CodePen.0

※リサイズイベントは実装していませんがリサイズ時にも再計算すれば問題ありません

通常、画面の中央にポイントを配置する場合は下記のように求めます。

const x = (windowWidth / 2) - (pointerWidth / 2)
const y = (windowHeight / 2) - (pointerHeight / 2)

画面幅の半分からさらにポインター要素の半分で引けば中心になります。
例えば、画面幅が 1000*640 でポインター画像が 20*20 だった場合は下記のようになります。

const x = (1000 / 2) - (20 / 2)
const y = (640 / 2) - (20 / 2)

これが横長や縦長画像で画面中央に収めるわけでない場合に、マスク画像のみ画面の中央に来てほしい場合は、さらに比率が加わります。

const x = ((windowWidth * (imageElementWidth / imageActualWidth)) / 2) - (pointerWidth / 2)
const x = ((windowHeight * (imageElementHeight / imageActualHeight)) / 2) - (pointerHeight / 2)

追加されたのは (imageElementWidth / imageActualWidth) の部分になります。
これは (画像のオリジナルサイズ / 実際の画像サイズ) という比率を求めています。
そこに画面幅を乗算して半分にするとポインターの位置を割り出すことができます。