Jump to content
GreenSock

Audrey13

Problem with ScrollTrigger.js

Recommended Posts

Hi,

 

A digital agency created our website and everything was working fine. But since 2 days, we have a big problem of display on the homepage. It seems that the problem comes from the ScrollTrigger.js file
But as I don't really know js, I find myself with a site that doesn't work normally anymore : an animation on a blue background that disappeared, blocks that don't work anymore, oversized SVG images...
Here is the link to the home page of the site: https://www.talent-bs.com/
And here is the link of the file that seems to make everything buggy: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js?ver=5.8.3


Can you help me please ? :/

Link to comment
Share on other sites

At first glance I would guess that some kind of Content was deleted/exchanged through a cms (likely WordPress) and that now causes the error in the console. 

Cannot read properties of undefined (reading 'indexOf')

Most likely the scrip that uses ScrollTrigger.min.js expects something to be present - namely an element with the class '.scooter-wrappe' which isn't present (any more) in your pages DOM. 

 

the actual culprit is app.js in line 608

  • Like 2
Link to comment
Share on other sites

3 hours ago, iDad5 said:

At first glance I would guess that some kind of Content was deleted/exchanged through a cms (likely WordPress) and that now causes the error in the console. 

Cannot read properties of undefined (reading 'indexOf')

Most likely the scrip that uses ScrollTrigger.min.js expects something to be present - namely an element with the class '.scooter-wrappe' which isn't present (any more) in your pages DOM. 

 

the actual culprit is app.js in line 608

Hi iDad5,

Thank you for your answer. But I don't understand what's wrong, because when I check, I find the class "scooter-wrapper" in my home.php file. The class also exists in the style.css.

 

 

<div class="col-md-6">
                    <section class="hero">
                        <div class="scooter-container anim">
                            <div class="scooter-zoom">
                                <div class="scooter-wrapper">
                                    <div data-animate="fadeInLeft">
                                        <div>
                                            <div class="scooter">
                                                <div class="wheel left"></div>
                                                <div class="wheel right"></div>
                                                <img src="<?php echo get_template_directory_uri(); ?>/img/scooter.png" class="img_scooter"/>
                                                <div class="scooter-shadow"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

 

Link to comment
Share on other sites

I think I see the problem...

  1. You linked to the wrong file - that URL points to the latest beta version that we just use on CodePen. That's not intended for deployment. We updated it recently. Whenever you deploy something, you should always link to the official locked file for a particular version on a CDN like CDNJS or JSDelivr, like the docs say. For example, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js or https://cdn.jsdelivr.net/npm/gsap@3.9.1/dist/ScrollTrigger.min.js
  2. I assume you forgot to gsap.registerPlugin(ScrollTrigger) AFTER your <body>. It looks like you just loaded it in the <head>, thus it happened before the <body> existed yet. 

I just updated the latest beta with some code that should resolve that issue you were seeing, but I'd still strongly recommend linking to a specific version from the real CDN so you don't run into issues like this in the future where our updates to a beta file break your site :)

 

Sorry about any confusion there. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

14 hours ago, GreenSock said:

I think I see the problem...

  1. You linked to the wrong file - that URL points to the latest beta version that we just use on CodePen. That's not intended for deployment. We updated it recently. Whenever you deploy something, you should always link to the official locked file for a particular version on a CDN like CDNJS or JSDelivr, like the docs say. For example, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js or https://cdn.jsdelivr.net/npm/gsap@3.9.1/dist/ScrollTrigger.min.js
  2. I assume you forgot to gsap.registerPlugin(ScrollTrigger) AFTER your <body>. It looks like you just loaded it in the <head>, thus it happened before the <body> existed yet. 

I just updated the latest beta with some code that should resolve that issue you were seeing, but I'd still strongly recommend linking to a specific version from the real CDN so you don't run into issues like this in the future where our updates to a beta file break your site :)

 

Sorry about any confusion there. 

 

Hi GreenSock,

 

Thank you very much ! I could not have found the solution alone. So once again, a big thank you and all my gratitude. I will study your recommendations to apply them. And I hope to be able to start working on JS later :)

 

  • Like 1
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.
×