Installation on Wordpress with a Premium theme

[AlexanderPohl]

Hello,

 

im very new to this and my englisch is also not the greatest. Im having problems "installing" gsap to my wordpress website. On my website i have a theme called "rewon" installed. After watching multiple videos and guides i ended up with this code in my funcions.php which looks like this:

 

Im not even sure if this is implemented correctly.

 

when trying to recreate the "first animation" in the learning tab from gsap, i ended up having a code like this:

 

When previewing the page, there is only the black box getting displayed but without any animation.

 

When checking the console there's a line saying: "Uncaught ReferenceError: gsap is not defined".

[Matthew Meaklim]

Hi Alexander,

 

I just had a quick look at the website and it looks like the inline script in your second screenshot is being called prior (on line 1138 of the source code) to GSAP being loaded (on line 1348 of the source code). It's difficult to debug an entire site, but that's likely the problem.

 

There does seem to be a custom script called on line 1369 of the source code, so you could try adding your "gsap.to" test to that file and see if that fixes your issue.

[Rodrigo]

Hi,

 

On top of Matthew's great advice, you should take a look at this guide in our Learning Center:

https://gsap.com/resources/Wordpress/

 

Hopefully this helps.

Happy Tweening!

[AlexanderPohl]

22 hours ago, Matthew Meaklim said:

Hi Alexander,

 

I just had a quick look at the website and it looks like the inline script in your second screenshot is being called prior (on line 1138 of the source code) to GSAP being loaded (on line 1348 of the source code). It's difficult to debug an entire site, but that's likely the problem.

 

There does seem to be a custom script called on line 1369 of the source code, so you could try adding your "gsap.to" test to that file and see if that fixes your issue.

Did you mean like this?

unfortunately this didnt work for me. Or the box didnt move at least.

 

[AlexanderPohl]

21 hours ago, Rodrigo said:

Hi,

 

On top of Matthew's great advice, you should take a look at this guide in our Learning Center:

https://gsap.com/resources/Wordpress/

 

Hopefully this helps.

Happy Tweening!

Could i just copy and paste this code into the functins.php without making any adjustments in the code? And where exactly do i have to paste the "DOM-Code" into? 

[Rodrigo]

Hi,

 

That's mostly a Wordpress question and we try to keep these free forums focused on GSAP related questions.

 

Wordpress has a queuing mechanism, so obviously you have to add the GSAP core to the queue first, then your GSAP Plugins with the GSAP core as a dependency and finally add your custom JS file or DOM-Code as you mention, with the GSAP plugins as a dependency, like that everything will be loaded in the order it should.

 

In the page I linked in my previous post there is a video that explains how to do that.

 

Happy Tweening!

[AlexanderPohl]

54 minutes ago, Rodrigo said:

Hi,

 

That's mostly a Wordpress question and we try to keep these free forums focused on GSAP related questions.

 

Wordpress has a queuing mechanism, so obviously you have to add the GSAP core to the queue first, then your GSAP Plugins with the GSAP core as a dependency and finally add your custom JS file or DOM-Code as you mention, with the GSAP plugins as a dependency, like that everything will be loaded in the order it should.

 

In the page I linked in my previous post there is a video that explains how to do that.

 

Happy Tweening!

Hello,

 

thanks for all the replys! I followed the video and now its working, im so happy!

 

https://pscaring.de/gsap-test/