Jump to content
Search Community

GSAP with Wordpress - Dev vs Prod Environment

jwalker44 test
Moderator Tag

Recommended Posts

Hi - I have a simple local website built with Wordpress.  GSAP works great here. I have the auth token loaded in my npmrc file and am enqueueing the scripts I need (gsap.min.js and ScrollTrigger.min.js).  However, when I copy the files up to my production site (all files match at this point), ScrollTrigger is not working.  I'm registering it in my .js file ( gsap.registerPlugin(ScrollTrigger); ) and again it works perfect on my local site. I have searched and not found a solution that helps. Also tried adding (lazy:false) with no luck. I feel like I am missing how to correctly install/use gsap on production server.  I've also watched the video on how to install - still think I am missing something.  Can anyone give me simple/clear instructions on how to push local site using gsap successfully to a production environment?  Thanks!!!!

Link to comment
Share on other sites

Hey @jwalker44. Thanks for being a Club GreenSock member! 💚

 

It's tough to troubleshoot blind but I wonder if it's just related to where you put your <script> tag in your page. Some people accidentally put it in the <head> or somewhere before the end of the <body>. The problem with that is the browser executes code from top to bottom, so if it executes the GSAP code BEFORE the <body> even exists, that means the elements that you're trying to animate don't even exist yet, so of course GSAP won't be able to find them. Solution: either put your code at the very bottom of the <body> -or- you could wrap your code in a "DOMContentLoaded" event handler so that none of it runs until the browser is done parsing the HTML/CSS/JS. 

 

If you're still having trouble, please make sure you provide a minimal demo or more info about any errors in the console, etc. 

Link to comment
Share on other sites

I am calling all the gsap code including the registerPlugin in the jquery load event when all the dom elements should be created.  If it is helpful the page with the ScrollTrigger is here: https://jwalker44.com/aerotropolis/  (the images in the green "Aerotropolis" section half way down the page should be animating in).  This works great on my local site. I'm not seeing any gsap related errors in the console...  Other animations using gsap but not the ScrollTrigger addon work ok.

Link to comment
Share on other sites

It isn't feasible to troubleshoot a live site like that with tons of factors involved, but loop inside which you're creating your ScrollTriggers doesn't seem to be finding any results (thus isn't running): 

$(".carousel-slide[animationcontainer]")

 

That code looks wrong to me. I'm not sure what you're trying to do there. Put a console.log() right before your animation(s) and I think you'll see it never even gets created. If you still need help, we'd be happy to look at a minimal demo (like a CodePen) - we just can't try to diagnose a live site like that. Way too many factors and it's too hard to make tweaks and test. But a CodePen would be far more conducive to troubleshooting. 

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