GSAP Help Required with integration into WordPress

[Junaid Ali Majaz]

Hello, I am a beginner and following videos to make my portfolio wesbite with GSAP, I have the website on Wordpress, I tried adding the GSAP code into my functions.php, but it does not work. I tried different things and even at one point, messed up my theme. Any help or a starting point to where to go to learn GSAP integration into Wordpress will be helpful. I tried watching GSAP video on this website but I think I am missing something. I am really lost here and have been trying to understand this process. do I need to host my WORDPRESS code somewhere on Github to edit it? Any help would be greatly appreciated, I really want GSAP integrated in my wordpress website and want to learn it so I can use it in future too. 

[Rodrigo]

Hi @Junaid Ali Majaz and welcome to the GSAP Forums!

 

This is our recommended setup when using GSAP in WordPress setups:

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

 

Hopefully this helps

Happy Tweening!

[Junaid Ali Majaz]

Hi, so I saw this video and I have a few questions for steps that I am probably missing. Do I edit a theme that I've downloaded or do I just start blank, also how do I access my functions.php and what is app.js, is this a seperate file that I need to create? 

[mvaneijgen]

Hi @Junaid Ali Majaz it sounds like your missing a few steps and my advice is take it slow and learn the basics first before you start thinking of rolling your own theme.

7 hours ago, Junaid Ali Majaz said:

do I need to host my WORDPRESS code somewhere on Github to edit it?

No you do not. 

3 hours ago, Junaid Ali Majaz said:

how do I access my functions.php

This is a default file every Wordpress theme should have and it lives in the root your theme folder eg /wp-content/themse/your-theme/

3 hours ago, Junaid Ali Majaz said:

what is app.js

This is an example file, as explained in the video this will be the file you write your GSAP code in.

 

3 hours ago, Junaid Ali Majaz said:

Do I edit a theme that I've downloaded or do I just start blank

That is a hard question to answer, this totally depends on your skill level. If you do download a already existing theme and you will be relying on updates from the theme developer you will have a bad time editing any files that are in the theme, because any update will overwrite all the edits you have made. The recommendation (also explained in the video) will be to create a child theme of that theme and do your overwrites in there. 

 

All this info has a slight understanding that you're already a bit familiar with the whole Wordpress environment, but to me it sounds like your not, so I would say learn how Wordpress works a bit first, before you start thinking about how to implement custom libraries in a framework you know not that well yet. 

 

Also this info only works if you're hosting your own Wordpress site and are not on wordpress.com, because to my knowledge this will not work if you host your website on wordpress.com it self.

 

Hope it helps and happy tweening! 

[Junaid Ali Majaz]

Awesome thankyou so much for clearing so many things, so what are my options then? if not wordpress then what other platforms I can use, where I don't need to host the site on a server. React? may be?  also I did some research and it says that hosting should not be a limitation. I have created a child theme. 

[mvaneijgen]

Wordpress is split in to two platforms the open-source framework see wordpress.org and wordpress.com a managed hosting platform where you can run wordpress sites. Wordpress.com is fairly limited in what you can and can't do and to my knowledge you can't load custom scripts and inject your own javascript. If you host Wordpress somewhere on a server (you pay for) it is totally fine and you can do what ever you want. 

 

7 minutes ago, Junaid Ali Majaz said:

where I don't need to host the site on a server

That is impossible, every site needs to be hosted on a server, that is how the internet works! Wordpress would be a fine option.

 

8 minutes ago, Junaid Ali Majaz said:

I have created a child theme

I would then follow the video https://gsap.com/resources/Wordpress/ to a tee and load GSAP in your site (don't forget to make your child theme the active theme) before adding GSAP I would make sure you can edit the child theme, so make some visual changes and see if you can see those. When GSAP is loaded on your site you should be able to type this in the devtools console gsapVersions and see which GSAP version is being loaded. 

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

Here is a starter template which loads all the plugins 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

My advise take things slow, it feels like you're trying to run before you can walk! You'll need some basic knowledge about Wordpress if you want to modify things and load custom scripts (oh and FYI if you're in a child theme instead of get_template_directory_uri() you'll need to use get_stylesheet_directory_uri(), otherwise it will be looking in your parent themes)

 

Hope it helps and happy tweening!