Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DeeDubs

GSAP, ScrollMagic & WordPress

Go to solution Solved by DeeDubs,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies.

 

I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far.

 

I am enqueue the scripts in my functions file like:

function my_theme_scripts_function() {
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true );
wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true );
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true);
}

add_action('wp_enqueue_scripts','my_theme_scripts_function');

then just for testing have tried using the below in my scripts file:

var controller = new ScrollMagic.Controller();
var myTest = new ScrollMagic.Scene({duration: 200})
.triggerElement('#hero1')
.setTween(testTween)
.addIndicators()
.addTo(controller);

but I keep getting the same error:

scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function

any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference.

Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible)

Cheers

D

Link to comment
Share on other sites

I'm not familiar with the intricacies of the WordPress ecosystem and enqueuing, but the error you're getting looks directly related to ScrollMagic (that's what has the triggerElement() and setTween() methods). I'm wondering if maybe when you do triggerElement("#hero1"), it's not able to find that element in the DOM because it's not loaded yet, thus it returns a null value or something. Just guessing. 

  • Like 1
Link to comment
Share on other sites

yeah I thought that but the script isn't fired until everything is loaded so the DOM element should be there. 

Link to comment
Share on other sites

Try adding a DOM ready event along with a window loaded event handler to make sure your code doesn't run unless the DOM is ready and the window is fully loaded.

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

    // wait until window is loaded (images, stylesheets, JS, and links)
    window.onload = function() {
    
          // custom code goes here
    
    };

});

:)

  • Like 3
Link to comment
Share on other sites

Just tried that... and no joy, same error. I think I may just try calling them in via the page header rather than enqueuing them and see if that works

Link to comment
Share on other sites

Hello DeeDubs,

 

Your WordPress enqueue function has true for its last parameter. That mean it loads in the footer, so its not loading in the head, but in the footer $in_footer.

 

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Have you contacted Jan Paepke who created ScrollMagic?

 

That would be the best place to find out why that ScrollMagic error is displaying. Even though ScrollMagic is made with GSAP, it is not made by GSAP.

 

File a issue about it on Jan Paepke's git:

 

https://github.com/janpaepke/ScrollMagic/issues

https://github.com/janpaepke/ScrollMagic

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

I finally worked it out, thanks for the pointers guys... as I was starting to suspect, it was just me being a f$%$ing idiot.

 

FYI

 

as I have .addIndicators in my ScrollMagic scene I needed to make sure I was also calling the ScrollMagic Debug JS file... as that was missing it was spannering everything else!

 

Thanks again and sorry for wasting any time

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