← ブログ記事一覧に戻る

GSAPに関する備忘録

GSAPに関する備忘録 環境構築(WordPressの場合) https://gsap.comのGet GSAPよりダウンロードし、"WordPressのテーマ名"/jsに保存する。※jsフォルダが無い場合は作成する。 以下スクリプトをfunction.phpに追記し、GSAPを適用 function add_gsap_to_wordpress() { // GSAPのパスを指定 wp_register_script('gsap', get_template_directory_uri() . '/js/gsap.min.js', array(), '3.0.0', true); // GSAPをキューに追加 wp_enqueue_script('gsap'); } add_action('wp_enqueue_scripts', 'add_gsap_to_wordpress'); function add_custom_gsap_animation() { // まずは、GSAPがすでにキューに入れられているか確認 if (wp_script_is('gsap', 'enqueued')) { $animation_script = " document.addEventListener('DOMContentLoaded', function() { gsap.to('#animatedElement', {duration: 2, x: 1000}); }); "; wp_add_inline_script('gsap', $animation_script); } } add_action('wp_enqueue_scripts', 'add_custom_gsap_animation'); 動作テスト 以下のコードを適当なページにカスタムhtmlで貼り付け 以後のアニメーション操作用にcustom-gsap-animation.jsを作成 // 作成した四角を横に移動させる document.addEventListener('DOMContentLoaded', function() { gsap.to('#animatedElement', { duration: 2, x: 1000 }); }); Section1 Section2 Section3 li: 1 li: 2 li: 3 Section4 Section5