Gsap plugings in wordpress

[Neg]

hello,    I am new in this field. Recently I bought club plugin. But unfortunately except "Draw SVG" and MotionPath Helper none of the rest of plugins work for me. Interia works with draagable, wihtout draagable it does not works direclty. From the Extra plugins: all working well except Pixi.    I am using Lavarelmix and Visuals Studio for building and designing WordPress websites.   Do you have any idea what's wrong? I only try the examples which are provided here. So it cannot be the syntax.

[GreenSock]

Hi @Neg. Thanks for joining Club GreenSock! 

 

It's almost impossible for us to troubleshoot blind. Can you please provide a minimal demo so we can have a peek? There's no reason whatsoever that I can think of for the plugins not to work unless maybe you loaded them AFTER you tried executing your code(?) For example, this would NOT work:

<script src="gsap.min.js"></script>
<script src="Draggable.min.js"></script>
<script> 
  Draggable.create(".box", {
    inertia: true // plugin hasn't loaded yet!!!
  });
</script>
<script src="InertiaPlugin.min.js"></script> <!-- PLUGIN LOADED AFTER CODE EXECUTED - BAD! --> 

I'm totally guessing, of course. Just make sure you're loading the plugin files and registering them BEFORE you execute your animation code. 

[Neg]

Thanks for quick reply. I tested all gsap plugins in a simple html file separately using the same examples in Doc with script tags and I noticed that all working well. Then, I tested the functionality of  "Extra Plugins"  by using again script tags in the header file and I noticed that it works very well too. But when I tested the same plugins through importing in app,js , I noticed that those plugins are not working even though I receive no error.

 

You can imagine that I  have the same issue with "Club Plugins". First I tried them with script tags, no work! Then I tried them with importing in app,js and registering (capture 1) again no response. 

 

Could you please help me? 

Thanks

[OSUblake]

All I see are 19 lines of code. That's not how imports are supposed to work. Imports are supposed to be scoped to a module, and included in every file where you are using them. And no, it won't increase the file size doing it that way.

 

Or are you trying to make GSAP global? If so, you can just use script tags, or this after importing and registering.

 

gsap.install(window);

 

[Neg]

I followed this instruction: npm install ./gsap-bonus.tgz (because I want to use ClubPlugins) and got gsap in my node-modules  folder (see screenshot , left column), then I imported them in aap.js to make global for all of my projects. 

 

"Gsap" and "Extraplugins" work very well because I use script tags in my header file. 

 

My problem now is not being able to use "ClubPlugins" in wordpress (using lavarelMix) neither through script tags nor import.

 

If you have any clue, I would appropriate. 

thanks 

[OSUblake]

9 minutes ago, Neg said:

I imported them in aap.js to make global for all of my projects. 

 

Again, imports are not global. They are scoped to files. You have to import in every file that uses it.

 

// page-1.js
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin);

gsap.from(".foo", { drawSVG: 0 });

// page-2.js
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin);

gsap.from(".bar", { drawSVG: 0 });

 

11 minutes ago, Neg said:

My problem now is not being able to use "ClubPlugins" in wordpress (using lavarelMix) neither through script tags nor import.

 

If you are linking directly to files in node_modules, it's probably not going to work unless it knows to include to them. The node_modules directory usually isn't included as part of your app.

 

This sounds more like a Lavarel issue. You should probably go check out their documentation on how to import.

https://laravel-mix.com/docs/main/mixjs

 

It looks like they are using require, so ES Modules won't work with that. You would need to import the UMD files in the dist folder.

 

https://greensock.com/docs/v3/Installation?checked=core,drawSVG,requireSyntax#requireSyntax

 

 

 

[Neg]

Thank you for guidance, very helpful but using  gsap modules  with LavarelMix for me became very complicated! Thus, I used another approach and now all working well