wordpressにて、gsapのscrollTriggerを実装したいのですが、動作しないため、以下の実装方法で不足している部分を教えていただきたく存じます。
(img要素にパララックスをかける目的ですが、一切反応しないといった具合です。)
エラーなどは特に出ておりません。
functions.phpに以下の通り読み込み用のコードを書いています。(jQueryも使うため含んでいます。)
gsapの読み込みは「function theme_gsap_script」以降になります。
ちなみに以下のサイトを参考に記述したものです。
https://greensock.com/wordpress/
scrollTriggerの内容はすべてapp.jsというファイルに書いていることを前提にしています。
functions.php
1 2<?php 3 4function st_enqueue_scripts() { 5 wp_deregister_script('jquery'); 6 wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false); 7 8 wp_enqueue_script('main', get_theme_file_uri('main.js'), array('jquery'), false, true); 9} 10add_action('wp_enqueue_scripts', 'st_enqueue_scripts'); 11 12function theme_gsap_script(){ 13 14 wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true ); 15 16 wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true ); 17 18 wp_enqueue_script( 'app', get_template_directory_uri() . 'app.js', array('gsap-js'), false, true ); 19} 20add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); 21
html
1<img data-y="-50" class="fadein js-parallax" src="<?php the_field('img') ?>" alt="">
app.js
1 2gsap.registerPlugin(ScrollTrigger); 3 4gsap.utils.toArray('.js-parallax').forEach(wrap => {//指定した要素をwrapとして取り出す 5 const y = wrap.getAttribute('data-y') || -100;//要素の位置の初期設定 6 7 gsap.to(wrap, { 8 y: y, 9 scrollTrigger: { 10 trigger: wrap, 11 start: 'top bottom', 12 end: 'bottom top', 13 scrub: 0.5, 14 markers: true 15 } 16 }) 17 });

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。