Jump to content
Search Community

Wordpress Integration (Could not solve in current topic)

ToniGSAP test
Moderator Tag

Recommended Posts

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. 

 

 

 

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

1 hour ago, ToniGSAP said:

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

Here you're attempting to load ScrollMagic, a non-GreenSock library, instead of ScrollTrigger. You should be loading ScrollTrigger instead: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

 

You shouldn't be using modules in this situation. Make sure you use the minified non-modules versions of your JS libraries including GSAP.

Link to comment
Share on other sites

1 hour ago, ToniGSAP said:

I'm specially interested in the text animation. 

That demo also makes use of SplitText, one of the many super helpful Club GreenSock plugins. So you'll need a Shockingly Green membership to use it in your site. Keep in mind that with a membership you can use GSAP including the Club plugins on an unlimited number of projects.

 

We’re pretty confident you’ll find that a membership pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. 

Link to comment
Share on other sites

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. 

 

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