Jump to content
GreenSock

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

GSAP and Wordpress - yet again. -SOLVED!

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

OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows.

 

Just to make sure it's working, I added this test code to a page's footer code:

 

<script type="text/javascript">
var blinkText = document.getElementsByClassName("blinking");

function blink() {
    TweenMax.to(blinkText, 0.3, {
        autoAlpha: 0,
        delay: 0.3,
        onComplete: function() {
            TweenMax.to(blinkText, 0.3, {
                autoAlpha: 1,
                delay: 0.3,
                onComplete: blink
            });
        }
    });
}
blink();
</script>
 

When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here?

 

TIA!

 

SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme.

 

<script type='text/javascript'>
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

// wait until window is loaded (images, stylesheets, JS, and links)
    window.onload = function() {
    
//fade out and set visibility:hidden
TweenMax.to(blinking, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenMax.to(blinking, 2, {autoAlpha:1, delay:2});
    
    };

});
</script>
 

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