'Simple' GSAP in Wordpress

[AndyWhite007]

Hi there - so I've made a bit of progress (joined creativecodingclub and done a few tutorials :- )

I've used the CodePen embedding to get 'Hello World' into Wordpress - please visit the site I'm building for my wife here and scroll down to the bottom (ignore the recipies unless you want to be healthy).  You'll see my codepen 'hello world' example. I only want to show the GSAP animation (and not the JS / SCSS / HTML tabs or anything else like 'Edit on CodePen' etc.). So it's working in WordPress - great! but visiters to the website only want the animations (which I'll have more enthusiasm to build once I get the basics working). 

Thanks

Andy

See the Pen eYroBOG by AndyWhite007 (@AndyWhite007) on CodePen

[mvaneijgen]

The use case for embedding pens on a website is like they are on here, to show others your code and have them be able to interact with it. It isn't build to have a widget shown on your site (without the Codepen shell), you could ask Codepen Support if that is a feature they provide (maybe it is with a Pro account?) 

 

Personally I use Codepen to make my animations, but then I move all the code to my website and integrate it in the website. I don't know your skill level, it seems like you've used a standaard Wordpress theme, you could create a child theme and edit your theme that way, but this is beyond the scope of this forum.

[AndyWhite007]

Thanks for the reply. I used to be a Flash AS2/AS3 developer so the actual GSAP scripts aren't a problem - the trouble is putting them into an existing webpage.  The example I gave here is for illustration only (as my wife's website isn't live yet and it's super simple).  I've spent ages (and I mean ages) on 'child themes' and ' enqueuing JS' etc. as well as various tutorials here for example.  However, they all assume you want to use CSS as part of the parent theme (and not dedicated to GSAP) and other 'gotchas' I get to after many hours of trying.  The fact that CodePen can easily be embedded into a WordPress post means it must be possible - but nobody seems to know how.

[mvaneijgen]

Ah, I see. Maybe it is, but that's more a Codepen question and not so much a GSAP question, so I would advise you to ask Codepen support what could be possible.

[AndyWhite007]

I think I'm 99% of the way there:
- host the CSS (with SVGs, css file etc.) and JS (inc GSAP) in a local directory (domain.com/GSAP/Project/Whatever.html)

- use the Codpen embedded feature and modify the code to use the above for CSS, JS and html.

Seems to work - admittedly it's not for the purist / pixel perfect person but it works on the few devices I've tried and doesn't crash the theme CSS.

Thanks for your help!

Andy

[GreenSock]

7 hours ago, AndyWhite007 said:

The fact that CodePen can easily be embedded into a WordPress post means it must be possible - but nobody seems to know how.

Is there some reason you want to use CodePen rather than just an iframe? That' basically what a CodePen is (with a bunch of extra features...which of course you'll pay a kb price for). If you are just trying to display a self-contained animation in your WordPress site, my guess is that you'd be better served by just having an <iframe> where the src is pointed to a local .html page on your server.