Web制作Tips（JS）

gsapは、1つの要素で複数のtransform処理を同時にやろうとするとバグが起きやすい。すでにCSSでtranslateしてる要素をgsapでscaleで拡大させたりrotateで回転させたりとかする場合。
gsapはすでにあるtransformもちゃんと考慮して良い感じに計算はしてくれるが、たまに元のtranslateの取得がうまくいかずにバグが起きたりする。
そういうときは、タグを増やしてtranslateさせる要素とscaleさせる要素を分けるようにしたり、translate使わずに別のプロパティで代替したほうが無難。

Alpine.js
属性を書くだけでVueみたいな実装ができる。
WPテンプレートに組み込むときもそのままでよいのがメリット。

https://github.com/CodeByZach/pace/
PACEのバージョンが最近上がったっぽい。
Pace.on('progress', (progress) => {}) でパーセンテージの数値をJSで取得できるようになっている。（ドキュメントには書いてないけど。ソースコード見たらあった）

dragstart イベントはFirefoxでしか反応しないっぽい？実機で確認済み。
https://developer.mozilla.org/ja/docs/Web/API/Document/dragstart_event

https://greensock.com/forums/topic/21961-plugin-issue-with-gsap3-npm-and-nuxtjs/
Next.jsなどでgsapのプラグインをimportするときは、以下のように書かないといけないっぽい。

import { CustomEase } from 'gsap/dist/CustomEase'

画像読み込み完了したかどうかの検知は以下のとおりだが、

const img = document.querySelector('img');
img.addEventListener('load', () => {
  // 読み込み完了後の処理
});

すでに読み込み完了しているimgタグで検知する場合は complete プロパティで取得できる。
両方のパターンをカバーするには以下のとおり。

function onLoad() {
  // 読み込み完了後の処理
}
const img = document.querySelector('img');
if (img.complete) {
  onLoad();
} else {
  img.addEventListener('load', onLoad);
}

videoタグも同様。 video.HAVE_FUTURE_DATA === 3

function onLoad() {
  // 読み込み完了後の処理
}
const video = document.querySelector('video');
if (video.readyState >= video.HAVE_FUTURE_DATA) {
  onLoad();
} else {
  video.addEventListener('canplay', onLoad);
}