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で貼り付け
<!-- アニメーションを適用するための要素 -->
<div id="animatedElement" style="width:100px; height:100px; background-color:blue;"></div>以後のアニメーション操作用にcustom-gsap-animation.jsを作成
// 作成した四角を横に移動させる
document.addEventListener('DOMContentLoaded', function() {
gsap.to('#animatedElement', { duration: 2, x: 1000 });
});- li: 1
- li: 2
- li: 3
この記事が気に入ったら
いいねしてね！