[Wordpress Integration (Could not solve in current topic)]

Ok, thanks for the comment @ZachSaucier. 

 

Regardless of SplitText, I am still not able to see any scroll effect in my site.

 

I think I should keep learning and reading more about GSAP and its integration in WP, and probably in a couple of months I think of getting member of Club GreenSock. 

 

Thanks. 

All the best. 

 

[Wordpress Integration (Could not solve in current topic)]

Okay Zach, thanks again for your help!

 

I'm very excited with GSAP potential! I am trying to read all the documentation about its integration with wordpress and possibilities. 

 

Actually, I am trying to replicate this codepen on this page: http://beta.tonigalbis.es/new-gsap/

 

See the Pen mdVMOjr#code-area by celli (@celli) on CodePen

 

But animations don't work as expected. I'm specially interested in the text animation. 

 

I tried to import Scrolltrigger plugin but the error is: Uncaught SyntaxError: Cannot use import statement outside a module

 

Now, I am importing it via:

 

wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true );

 

I also tried to paste in the header of my site: <script type="module">...</script> but maybe I'm not doing in the correct way. 

 

Could you please help me with this?

 

Thank you!

 

[Wordpress Integration (Could not solve in current topic)]

Hi @ZachSaucier, thanks for your welcome message and your fast reply. 

 

Sure, I've been testing it on my test domain: http://beta.tonigalbis.es/testing-4/

 

You'll be able to see that error in the console. 

 

Thanks again. 

[Wordpress Integration (Could not solve in current topic)]

Hi, 

 

I'm new on GSAP and I have been reading about integrating it on Wordpress. I already integrated other libraries in the past like waypoints.js

 

I've followed the rules of the existing topics about it, but I still get an error:

 

Uncaught ReferenceError: gsap is not defined
    at custom-gsap-scripts.js?ver=5.5.1:11

 

on this example from Codepen:

 

const anim = gsap.to(".box", {

rotation: 27,

x: 100,

duration: 1,

ease: "power3",

 

repeat: -1,

repeatDelay: 1

});

 

These are the steps I followed: 

 

1. Enqueue via CDN in functions.php in the child theme (using get_stylesheet_directory_uri())

2. Create the directory in the child theme with the file custom-gsap-scripts.js

3. I added my custom GSAP code waiting the DOM is ready. 

 

Did I missed something? Could anyone help me? 

 

Thanks very much in advance. 

Greetings.