NodeJS Page built with NPM and Imported to Wordpress Site

[initLoading]

So, we had a web dev build our new homepage. He used NodeJS and had us 'run npm build' to build it on our end.

 

We managed to get the main page loading fine on our wordpress based site. It required us to wpenqueue the npm generated bundle.js file. However we wanted to use the footer he put together on the rest of the site.

 

The issue we're running into is the footer element that needs to animate does not work. It only works on the homepage which has a ton of elements to it.

 

Hopefully somebody here can give me some clues about how to get this to work.

 

I do understand that import gsap from 'gsap';  won't work on codepen the way I have it written, but I wanted to keep it as close to the original as possible.

 

There's also an export function initLogo() line (the file this javascript is pulled from is called Logo.js).

 

There is a general script.js file which includes the following, but I'm not sure if it's relevant here or not

 

//general css style
import './style.css';
//component css styles
import './header.css';
import './oscilloscope.css';
import './hud.css';
import './ticker.css';
import './tv.css';
import './team.css';
import './footer.css';
import './logo.css';

import { MousePosition } from './shared/MousePosition';
import { initOscilloscope } from './oscilloscope/Main';
import { initHud } from './hud/Hud';
import { initTicker } from './ticker/Ticker';
import { initTv } from './tv/Main';
import { initTeam } from './team/Team';
import { initLogo } from './logo/Logo';

//track mouse position
const mousePosition = new MousePosition(false);
mousePosition.init();

//oscilloscope
initOscilloscope(mousePosition);

//hud
initHud(mousePosition);

//ticker
initTicker();

//tv
initTv(mousePosition);

//team
initTeam(mousePosition);

//logo
initLogo();

Any insight would be much appreciated.

 

See the Pen LYrdJjK by initLoading (@initLoading) on CodePen

[Rodrigo]

Hi @initLoading and welcome to the GreenSock forums.

 

Yeah, unfortunately the files you are pointing to in codepen won't allow import since they are not ES Modules. Also is almost impossible for us to debug your issue with the information you provide. The only thing I can think of is that there is an error being thrown when you load a different page or that the JS file for that particular page is not being loaded, or it's being loaded/enqueued before GSAP and is throwing an error and it doesn't work.

 

Honestly you should speak with the developer that created this for you as the build process that was set up, should provide all the files you need to run your website.

 

Sorry I can't be of more assistance, but this is not really a GSAP related issue. If you find a error/warning message in your console that is GSAP related, you can paste it here and maybe that could shed some light on your underlying issue.

 

Happy Tweening!

[initLoading]

Thank you, @Rodrigo for looking into that so quickly for me. Much appreciated.

 

I’m waiting to hear back from the dev (he’s 6 hours ahead) and thought I’d working it out.

 

we only contracted him to do the homepage. The footer was meant to work on all pages but he’s not familiar with Wordpress.

 

my thinking is GSAP isn’t being loaded at all. Is there a specific file I should be loading in? I only enqueued a file called gsap.min.js 

[GreenSock]

1 hour ago, initLoading said:

my thinking is GSAP isn’t being loaded at all. Is there a specific file I should be loading in? I only enqueued a file called gsap.min.js 

Yep, that's all you need (gsap.min.js) based on the snippet you provided. 

 

I'm not familiar with WordPress, but if you're seeing errors in the console saying that "gsap" is undefined, then you either didn't load it -OR- you're just executing code that's trying to use GSAP before you load GSAP. I've seen people do this where they've got it set up like...

<script>
  // a bunch of animation code....
  gsap.to(...); 
  ...
</script>
<!-- the above code won't work because GSAP is loaded AFTER: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

Good luck!

[initLoading]

On 11/24/2022 at 1:02 AM, GreenSock said:

Yep, that's all you need (gsap.min.js) based on the snippet you provided. 

 

I'm not familiar with WordPress, but if you're seeing errors in the console saying that "gsap" is undefined, then you either didn't load it -OR- you're just executing code that's trying to use GSAP before you load GSAP. I've seen people do this where they've got it set up like...

<script>
  // a bunch of animation code....
  gsap.to(...); 
  ...
</script>
<!-- the above code won't work because GSAP is loaded AFTER: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

Good luck!

Thanks for sending me down the right path. Basically all I had to do was get rid of the 'import gsap from 'gsap' and the export line in the code since it was designed to be built in NPM. After that, the module works great and the footer now animates how it is supposed to. Only had to enqueue that newly edited Logo.js file and put script src in the header.

 

Thanks!