Issue with gsap and scrolltrigger scripts in wordpress

[Pauline Brothier 7 Likes (Newbie)]

Hi, 

I'm struggling with my scripts on wordpress. 
On my home page I haven't any trouble with gsap ans ScrollTrigger, both working fine. 

But on my agency page, I have error in the console and ScrollTrigger doesn't work. 
 

I looked topics about this, but I didn't find a solution which works for me. 

 

You can watch the production website with errors here : https://dev.bklt.fr/ggr-wp/agence/

 

In my functions.php :

function html5blank_header_scripts() {
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
         
        wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!
        
        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!
        
        wp_register_script('gsap', get_template_directory_uri() . '/js/lib/gsap.min.js', array(), '3.6.0', false, true); // Greensock
        wp_enqueue_script('gsap'); // Enqueue it!
        
        wp_register_script('scrolltrigger', get_template_directory_uri() . '/js/lib/ScrollTrigger.min.js', array(), '3.6.0', false, true); // ScrollTrigger
        wp_enqueue_script('scrolltrigger'); // Enqueue it!

        wp_register_script('agencescripts', get_template_directory_uri() . '/js/agence.js', array('jquery'), '1.0.0'); // Page agence scripts
        wp_enqueue_script('agencescripts'); // Enqueue it!
        
        wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('html5blankscripts'); // Enqueue it!
    }
}

add_action('init', 'html5blank_header_scripts');

My agence.js

(function ($, root, undefined) {

    $(function () {

        'use strict';

        // DOM ready, take it away

        let gasp_horizontal_scroll = null;

        gsap.registerPlugin(ScrollTrigger);

        //DESKTOP
        if (window.matchMedia("(min-width: 1024px)").matches) {

            jQuery(document).ready(function () {

                //initialisation du scroll horizontal agence
                init_horizontal_scroll_agence();

                //initialisation de la progress bar
                init_progress_bar();
            });

            function init_progress_bar() {

                gsap.to('progress', {
                    value: 100,
                    ease: 'none',
                    scrollTrigger: {
                        scrub: 0.3
                    }
                });
            }

            function init_horizontal_scroll_agence() {

                let container_agence = document.getElementById("container_agence");

                if (gasp_horizontal_scroll == null) {

                    gasp_horizontal_scroll = gsap.to(container_agence, {
                        x: () => -(container_agence.scrollWidth - document.documentElement.clientWidth) + "px",
                        y: 0,
                        ease: "none",
                        scrollTrigger: {
                            trigger: container_agence,
                            invalidateOnRefresh: true,
                            scrub: 1,
                            pin: true,
                            end: () => "+=" + container_agence.offsetWidth
                        }
                    });
                }
            }
        }
        
    });

})(jQuery, this);

 

If someone have a solution it will be perfect ! 

 

Thanks  

[ZachSaucier 7,132 Likes (Superhero)]

Hey Pauline. In line 46 of your scripts.js file, your tween and ScrollTrigger is looking for an element with an ID of container to use as the tween target and ScrollTrigger trigger. That element doesn't exist on your page, hence the error.

 

If you need further help, please create a minimal demo of the issue using something like CodePen so that we can see and edit the code for ourselves more easily  

 

P.S. It's named "GSAP", not "GASP"  

[Pauline Brothier 7 Likes (Newbie)]

Thanks for your answer. 
The element ID on line 46 does exist. The issue doesn't come from there. 
The none dynamic version (html, css and js) works fine. I really think the issue comes from the loading scripts with wordpress. 

[smenegassi 5 Likes (Newbie)]

I have pretty much the same problem. I wonder if the problem is not from the gsap.registerPlugin... Gsap and the plugin "SplitText" are charged. But it keeps sayin, when loading the custom animation js file that SplitText is not defined...

[smenegassi 5 Likes (Newbie)]

I have ScrollTrigger workin in my site. You don't need to register ScrollTrigger...

[ZachSaucier 7,132 Likes (Superhero)]

59 minutes ago, smenegassi said:

it keeps sayin, when loading the custom animation js file that SplitText is not defined...

That sounds like an issue where you're failing to load SplitText properly or are loading it after your custom scripts. It doesn't seem like it's related to the original error that this person posted about.

[smenegassi 5 Likes (Newbie)]

Yes you are right. I was not loading SplitText correcty. It took me a walk on the beach (cold and windy) to see my error. Thanks a lot !

[sophiegumpo 0 Likes (Newbie)]

I'm having the same issue with Wordpress. although the scroll trigger script is loading, my custom script cannot seem to use the functionality. I'm at a loss as to how to get this functioning - please advise. 

 

Invalid property scrollTigger set to {trigger: ".categories__grid--item", toggleActions: "restart none none none"} Missing plugin? gsap.registerPlugin()

 

This is my custom scripts: hero animation is working as expected but the scroll trigger doesn't fire

 

(function ($, root, undefined) {

    $(function () {

        'use strict';

        // DOM ready, take it away

        gsap.registerPlugin(ScrollTrigger);

        //DESKTOP
        //if (window.matchMedia("(min-width: 1024px)").matches) {
            if (window) {
            jQuery(document).ready(function () {

        
                init_scroll_trigger();
                init_hero_animation();

            });

        }

        function init_hero_animation() {
            var toolTimeline = new TimelineMax();
            var duration = .5;

            toolTimeline.from('.hero__title', duration, {opacity: 0, scale: 25, ease: Linear.easeInOut}, .2);

            toolTimeline.from('.hero__content p', duration, {opacity: 0, scale: 25, ease: Linear.easeInOut}, .5);

            toolTimeline.to('.hero__button .mybutton', duration, {left: 0, ease: Linear.easeInOut}, .2);

        }

        function init_scroll_trigger() {
            //ScrollTrigger.refresh();
            // console.log(ScrollTigger);
            gsap.registerPlugin(ScrollTigger);

            gsap.to(".categories__grid--item", {
                    scrollTigger: {
                    trigger: ".categories__grid--item",
                    toggleActions: "restart none none none"
                },
                y: -50,
                duration: 1

            });
        }


    });

})(jQuery, this);

 

This is the order the scripts are being loaded in the header

 

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js?ver=5.6.1' id='gsap-js'></script>
	<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js?ver=5.6.1' id='gsap-js-js'></script>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/EasePack.min.js?ver=5.6.1' id='ease-pack-js'></script>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js?ver=5.6.1' id='scrolltrigger-js'></script>

[ZachSaucier 7,132 Likes (Superhero)]

Hey @sophiegumpo and welcome to the GreenSock forums.

 

First off, don't load TweenMax - it's old, there's no need for it, and it might mess some things up. 

 

As for your issue, you misspelled it as scrollTigger/ScrollTigger multiple times, not scrollTrigger/ScrollTrigger. Fix that and I believe it should work  

 

Also see the GSAP 3 migration guide for how to upgrade to the latest syntax. Not doing so is one of the most common GSAP mistakes.

[Ginger Soul 12 Likes (Newbie)]

Props to @ZachSaucier for knocking three issues out in the same thread

 

DB

[sophiegumpo 0 Likes (Newbie)]

wow - I cant believe I missed that spelling mistake - you don't understand how many times I checked it haha!

 

Thank you very much!