Jump to content
Search Community

ScrollTrigger.matchMedia is not a function error on wordpress

oveRuns7777 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

It was working normally on my local site using the task runner.
However, when I load it in wordpress, it stops working with the title error.
The order of loading in wordpress is not wrong and I am not sure why I am getting this error.
Please help.

 

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js' id='gsapjs-js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js' id='scrollTriggerjs-js'></script>
<script type='text/javascript' src='http://aaaa.local/wp-content/themes/aaaa/assets/js/gsap.min.js' id='js-gsap-js'></script>

Source code in question

ScrollTrigger.matchMedia({
  "(min-width:1184px)": () => {
    /**
     * GSAPで横スクロール
     */
    const listWrapperEl = document.querySelector(".tl-ItemList");
    const listEl = document.querySelector(".tl-ItemList__container");
    gsap.to(listEl, {
      x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
      ease: "none",
      scrollTrigger: {
        trigger: ".side-scroll",
        start: "top top",
        end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
        scrub: true,
        pin: true,
        anticipatePin: 1,
        invalidateOnRefresh: true,
      },
    });

    gsap.utils.toArray(".js-parallax").forEach((wrap) => {
      const y = -350; //wrap.getAttribute("data-y") || -300;

      gsap.to(wrap, {
        y: y,
        scrollTrigger: {
          trigger: wrap,
          start: "center bottom",
          end: "bottom center",
          scrub: 3,
          //markers: true
        },
      });
    });
  },
});

 

Link to comment
Share on other sites

 

Welcome to the GreenSock forum, @oveRuns7777. Maybe that's just a typo on your end? You are missing a closing bracket.

 

ScrollTrigger.matchMedia({
	"(min-width:1184px": () => { // <--- you have this
...
    

ScrollTrigger.matchMedia({
	"(min-width:1184px)": () => { // <--- should be this
...

 

Also, ScrollTrigger.matchMedia() is deprecated if I recall correctly.

 

Quote

[DEPRECATED in favor of gsap.matchMedia() in 3.11.0+]

 

You'll probably want to have a look at the newer gsap.matchMedia()

 

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

  • Like 3
Link to comment
Share on other sites

47 minutes ago, akapowl said:

 

GreenSock フォーラムへようこそ。@overRuns7777. 多分それはあなたの側の単なるタイプミスですか?閉じ括弧がありません。

 


	    

    


	    

Thank you.
It was a simple mistake there.
I added closing brackets but still get the same error.
I don't have time to change the coding, so if you know of a version that works, please let me know.

Link to comment
Share on other sites

function enqueue_scripts_and_styles() {
    wp_enqueue_script(
        'gsapjs',
        'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js',
        array()
    );

    wp_enqueue_script(
        'scrollTriggerjs',
        'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js',
        array('gsapjs')
    );

    wp_enqueue_script(
        'js-gsap',
        get_template_directory_uri() . '/assets/js/gsap.min.js',
        array('gsapjs', 'scrollTriggerjs'),
        date('YmdHis', filemtime(get_template_directory() . '/assets/js/gsap.min.js'))
    );
}
add_action('wp_enqueue_scripts', 'enqueue_scripts_and_styles');

Thank you.
This is the plugin I am loading on wordpress.
It is loading and I don't think there is a problem but I am unsure of the cause.
I'm about to cry.

Link to comment
Share on other sites

  • Solution

That looks like you've written out console.log("GSAP", "ScrollTrigger") with strings

 

I don't think you've got your scripts enqueued properly though.

I would expect to see the GSAP object returned. Could you copy paste this snippet in for me?

console.log(gsap, "💚")

This should be what you get back

Screenshot 2023-02-01 at 14.47.22.png

 

And this is the correct way to enqueue your scripts.

// The proper way to enqueue GSAP script in WordPress

// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script(){
  // The core GSAP library
  wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true );
  // ScrollTrigger - with gsap.js passed as a dependency
  wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true );
    // Your animation code file - with gsap.js passed as a dependency
  wp_enqueue_script( 'gsap-js2', get_template_directory_uri() . 'js/app.js', array('gsap-js'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

 

We can try to help but we're not wordpress experts here. Maybe give this wordpress support discord a go if we can't help?
https://disboard.org/server/991553521197518878

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...