Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pauline Brothier

Issue with gsap and scrolltrigger scripts in wordpress

Recommended Posts

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 :) 

Link to comment
Share on other sites

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" ;) 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

  • 2 weeks later...

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>
   
 

 

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

Thank you very much!

 

 

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.
×