Uncaught TypeError: Cannot read property 'repeat' of undefined

[Donzé]

Bonjour

 

I have a problem with the use of tweenMax.min.js on my wordpress site.

I use the "H-code" template from themezaa.

 

Here is the insertion within My Child theme in the function.php page

 

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
	wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js', array(), false, true );
	wp_enqueue_script( 'gsap-js1', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js2', get_stylesheet_directory_uri()  . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

Here is the content of my custum-gsap-script.js js file

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
    console.log("DOM loaded");
    
    // wait until images, links, fonts, stylesheets, and js is loaded
    window.addEventListener("load", function(e) {
       // custom GSAP code goes here
       var tl = new TimelineMax();
       tl.fromTo(".slider-typography", { height : "0%"}, { height : "100%", ease:Power2.easeInOut });
      
    }, false);
    
  });

When I look at the google console, I get the following error

 

Uncaught TypeError: Cannot read property 'repeat' of undefined
    at d.s.fromTo (TweenMax.min.js?ver=5.4.1:14)
    at custom-gsap-scripts.js?ver=5.4.1:13

 

Can you help me interpret and correct this error?

Thank you in advance for your help.

 

[ZachSaucier]

Hey Donzé and welcome to the GreenSock forums. 

 

I went ahead and Google Translated your post into English so that more of the regulars can understand what you're saying. Feel free to edit it to correct parts where necessary.

 

First off, TweenMax is old. We highly recommend GSAP 3 which just has a GSAP file (no more Lite/Max). Perhaps just upgrading will fix your issue. For more details see this post:

 

If you are going to use GSAP 2, you only need to load TweenMax (not TimelineMax) because it includes TimelineMax in it.

 

37 minutes ago, Donzé said:

Uncaught TypeError: Cannot read property 'repeat' of undefined

That is a very curious error. Are you sure that the element that matches ".slider-typography" exists on the page?

[Donzé]

Hello ZacherSaucier

 

Thank you for your prompt return.

I will try to install GSAP3 to see if the problem persists.

Not being a javascript professional, i suppose that if I load GSAP3, I'll probably have to change the following line.

 

var tl = new TimelineMax();

For your question, the ".slider-typography" element does exist.

Voir capture

 

My English is not very good so I used an online translator.

 

By

 

[ZachSaucier]

11 minutes ago, Donzé said:

I'll probably have to change the following line.

 

var tl = new TimelineMax();

We recommend that you change it but GSAP actually supports it (for backwards compabitility).

 

Let us know if you run into more issues.

[Donzé]

Hello,

 

I made the changes by installing the latest version of gsap

// The proper way to enqueue GSAP script
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function theme_gsap_script() {
	wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-js1', get_stylesheet_directory_uri()  . '/js/custom-gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

and this is my js code that I call in custum-gsap-script.js

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function (event) {

   console.log("DOM loaded");

   // wait until images, links, fonts, stylesheets, and js is loaded
   window.addEventListener("load", function (e) {
      // custom GSAP code goes here
      const tl = gsap.timeline();

      tl.fromTo(".logo", {
            opacity: "0"
         }, {
            opacity: "1",
            x: 60,
            duration: 0.5,
         })
         .fromTo(".slider-typography", {
            height: "0%"
         }, {
            height: "100%",
            opacity: "1",
            ease: "easeInOut",
            duration: 1,
            delay: 0.5,
         })
         .fromTo(".slider-title-big4", {
            opacity: "0"
         }, {
            opacity: "1",
            y: -20,
            duration: 0.5,
         })
         .fromTo("h1", {
            opacity: "0"
         }, {
            opacity: "1",
            y: -20,
            duration: 0.5,
         })

   }, false);

});

I no longer have the previous error message.

But when loading the page, I get well the expected effects however, I think there is a conflict with another plugin because the effects are jerky and load badly ...

Here is the link of the page: https://preprod.girod.co.uk/integration-et-formation/
Can you help me with that? By

[ZachSaucier]

6 hours ago, Donzé said:

I no longer have the previous error message.

Yay! Good job converting it.

 

6 hours ago, Donzé said:

I get well the expected effects however, I think there is a conflict with another plugin because the effects are jerky and load badly ...

It's pretty hard to help with that sort of thing from our side. I recommend that you try the animations on a blank page with only the elements that are going to be affected. If it works fine you know it's not an issue with this code but a conflict with something else. Then you can try adding in piece by piece to see which piece(s) make it not work well.

 

Side note: You don't need quotation marks around numerical values. The only time when you do is if you want to specify a unit as well.

[Donzé]

Yes, I imagine it's complicated for you.

I developed on codepen to actually test my code.

It's going very well:

See the Pen MWKKwdZ by Maximus398 (@Maximus398) on CodePen

So I do think there's a conflict with another code...

I'll look into it and hopefully find the problem.

Thank you for your help.