美しいアニメーションで、ページにストーリーを。
動きをデザインしよう。
GSAPとはWebアニメーションの業界標準のhtml要素にアニメーションを付与する最高峰のjsライブラリです。このGSAPの機能を導入することで、あなたのWebサイトにリッチなブラウジング体験を加えることができます。美しい動きのあるページは見る人を魅了し、コンテンツの魅力をいっそう際立たせることでしょう。
Google・Appleも採用。10年以上の実績がある最高峰のアニメーションエンジンです。
a-blog cms / WordPress / React / Vueなど、どこでも使えてjQueryも不要です。
スクロール連動・タイムライン制御・物理的な動きが、CSSだけでは不可能な領域へ。
MotionLab - GSAP Simulatorはあなたのページにコードを1つ入れるだけで、GSAPの実際のアニメーションを確認しながらコードを作ることができます。自動でページに書き込むことはありませんので、気に入ったコードが出来たら、そのコードをコピーしてご自身の手でページに反映をしてご利用ください。
サンプルじゃない。実際に使うページで動きを直接確認できます。
GSAPの構文を覚えなくていい。動きが決まったらコードをコピペするだけでOKです。
スクロール連動アニメーションが、パネルの操作だけで作れます。
MotionLabが生成するのはアニメーションのコードです。実際のページで動かすには、GSAPのライブラリも合わせて読み込む必要があります。以下の手順でページに組み込んでください。
data-ml-mode 属性を付けないのが userモードです。パネルは表示されず、アニメーションのみが動作します。GSAPは自動で読み込まれるため、別途追加する必要はありません。defer は付けないでください。
<script src="https://www.idstock.net/motionlab/motionlab-simulator.min.js"></script>MotionLabパネル下部の GENERATED CODE に表示されているコードをそのままコピーして貼り付けるだけです。スケジュール（毎回 / 1日1回）はコード内に自動反映されています。
<script>
MotionLab.register(function() {
const tl = gsap.timeline();
tl.from(".hero", { opacity: 0, y: 40, duration: 0.8, ease: "power2.out" });
}, 'daily');
</script>スケジュール（「毎回」「1日1回」）はuserモードでのみ有効です。editorモード（data-ml-mode="editor"）では常に毎回再生されます。本番ページへ組み込んだ後、userモードで動作を確認してください。
MotionLabはGSAPの一部機能をビジュアルで操作できるツールです。対応・非対応の機能を事前にご確認ください。非対応の機能が必要な場合は、生成されたコードを手動で編集してGSAPの機能を直接追加することが可能です。
gsap.timeline() — マルチステップタイムラインtl.to() / tl.from() / tl.fromTo()x y z rotation scale opacityrepeat yoyoduration ease stagger offsettrigger start end scrubMotionLab.register()）gsap.set() — 瞬間セットgsap.to()（タイムラインなし）color width height 等）--変数）keyframes オプションgsap.context() / gsap.matchMedia()MotionLab - GSAP Simulatorの料金体系はとてもシンプルです。
1ドメイン（FQDN）につき「880円（税込）／月」です。それ以外に費用はかかりません。ドメイン毎のライセンスになるため複数人のプロジェクトで利用しても問題はありません。editorモードは制作・確認用、userモードは本番ページへの組み込み用として、2つのモードでお使いいただけます。ご利用にはGSAP自体のライセンスへの同意が必要です。
シンプルな月額880円（税込）です。動きのあるサイトは制作単価が上がりますので、十分ご予算内でのカバーが可能です。ご予算や納期に厳しい案件でも、少し手間をかければクライアントの満足度も上がります。
制作に関わる人数がどれだけいても月額880円（税込）です。JSONエクスポート・インポートが付いているので、お気に入りの動作を他のプロジェクトで使い回すことも可能です。
※価格・仕様は改訂される場合があります
最新機能にアップデートされる安心感をお届けします。
ご利用はマイページからお申し込みいただけます
購入はこちら