'Simple' GSAP in Wordpress post

AndyWhite007 · January 4, 2023

Overview: I'm trying to get GSAP working in a wordpress site here. You've probably seen it before :-)

There's nothing 'special' about the Javascript or image (code below).

Question: What's the best way to show GSAP within an area on a Wordpress post or page?

Ideal Solution:

I'm trying to simply show the GSAP animation all relative to the 'block' (or whatever is recommended - table? container?) - so percentages I guess - and also suitable for responsive / mobile design.

There will be many illustrations across the website but I need to start basic so any help appreciated.

Thanks

Andy

Java and Image

GreenSock · January 4, 2023

Hi @AndyWhite007. I read your post about 3 times and I'm still not quite sure what you're asking, sorry. I may be missing something obvious.

I don't know what you mean by "show GSAP within an area". GSAP is a JavaScript library - are you asking how to animate a particular element in an area?

What does "show the GSAP animation all relative to the block" mean? What do percentages have to do with it?

Have you seen this page?:

If you still need some help, please make sure you carefully describe what exactly you want to have happen and if you can, provide a minimal demo.

Happy tweening!

AndyWhite007 · January 4, 2023

Thanks for the reply. The question I think is rather simpler though (and possibly my English isn't great :- )

I've put what I've done here: https://doogle.com/index.php/2022/10/03/test-gsap/ but I'm working on it elsewhere so may find a solution.

It doesn't require a code review etc so I'll try to reword the question

Re-wording the question

- You do some GSAP which requires js, css and the html - great!

- Question: Once done, how do you add it onto a page in your website at a specific place on the page? Does it go inside a table, div, container? Do I insert the raw html directly?

I've tried both a table and a container here: https://doogle.com/index.php/2022/10/03/test-gsap/

Long winded wording if it helps :- )

The reason I'm finding it hard is wordpress has 'drag and drop' for Lottie animations, YouTube etc. but nothing for GSAP.

I've been through the video you gave (thanks btw) and ideally I'd put it in codepen.io for you to look at. but the code is just 'hello world' type code and I believe the Wordpress tutorials are not necessary (such as modifying the functions.php and including child CSS) since you can call GSAP functions/js/css directly by adding them to a folder under the site domain. I've got them below:

https://www.doogle.com/GSAP/00_GSAP_JS/gsap.min.js

https://www.doogle.com/GSAP/00_TEST/js/script.js

https://www.doogle.com/GSAP/00_TEST/img/fred.svg

Rodrigo · January 4, 2023

3 hours ago, AndyWhite007 said:

I believe the Wordpress tutorials are not necessary (such as modifying the functions.php and including child CSS) since you can call GSAP functions/js/css directly by adding them to a folder under the site domain.

In some cases that could be true but in the case of wordpress you do need to enqueue things properly because it's highly possible that GSAP is loaded and executed before the element is in the DOM, so that's why nothing happens. The way you structure your HTML (div, flex, grid, tables, etc.) has no effect on whether GSAP can animate the element or not, you just need to load GSAP and execute your JS with the GSAP animations in it after the content is added to the DOM, that's why normally scripts go before the closing <body> tag in HTML.

As mentioned is really hard to know exactly what could be the issue here, which is a bit more difficult with wordpress but my best guess is that this has to do with enqueuing the scripts properly and in the right order.

Hopefully this helps.

Happy Tweening!

AndyWhite007 · January 4, 2023

Thanks for the help. I think the best thing I can do is simply learn as much as possible. I made some progress here: https://doogle.com/index.php/2022/10/04/test2-gsap/ - the graph at the bottom is an svg and I'm fairly sure I can animate some graph lines (for example this post: https://doogle.com/index.php/2023/01/01/drugs-and-addictions/)

I know GSAP is the way to go and I joined creativecodingclub (for life!) over Christmas.

JE551 · January 4, 2023

Hey @AndyWhite007,

Sorry if I'm misunderstanding you in anyway or if I'm repeating anything you may know already🙊. I'm new to GSAP but work with WordPress quite often so maybe this will help you in someway.

I'm not 100% sure, but it looks like you are adding an iframe that points to an html file that houses your animation which is then included onto your post via the iframe. This means that animation actually exists outside the page as it's stored in the html file here and your only reference to the JS scripts exist on the html file rather than on your site and all the pages and posts within your site.

When I set up my custom theme or child theme (you should really consider using a child theme, otherwise your changes in the theme directory would get overwritten if the theme updates), this is my approach to adding GSAP and custom JS. I add the GSAP scripts and my custom scripts that call my GSAP functions into my theme directory and use WordPress's recommended way to enqueue the scripts onto the site. Here's a tutorial. If needed, you can also use 'if statements' to only add those scripts to specific pages of the site (ie: only add the scripts on the 'test2-gsap' page you have), here's another resource that shows you how to do that.

After the scripts are added to the theme directory and enqueued, you should be able to add your desired blocks within your page itself using the block builder and add your css (some themes have specific places you can add this or you can always add it in your custom CSS). Provided those steps are done correctly, it should work out

Unsure if this helps in anyway but I hope you find the solution soon 😀

Notifications

Messages

'Simple' GSAP in Wordpress post

Recommended Posts

AndyWhite007

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

AndyWhite007

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

AndyWhite007

Link to comment

Share on other sites

JE551

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members