AndyWhite007

I've managed to animate a simple graph but when I load it to my site it says "Oops! Trial version of DrawSVGPlugin deployed". I've joined Club Greensock a while ago and also 'Creative Coding Club' but didn't realise there may be a need to register for the plugin used? - is this correct? I only want to animate a graph so I could (in theory) do it other ways (any suggestions - see below) - for simple annimations (like making lines 'grow') then is there a simpler way without specialist / paid plugins? I'm only trying to bring a bit of 'life' to my site - I'm not a professional web-developer. Side question: - in the Code Pen: I've 'got it working' by making the SVG in the HTML - but is there a better way - or should I keep everything external to the html? i.e. what's 'best practice' for this?

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

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.

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

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.

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

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 <div id="fred"><img class="fred" src="https://www.doogle.com/GSAP/00_TEST/img/fred.svg" alt="Greensock" /></div> <script src="https://www.doogle.com/GSAP/00_GSAP_JS/gsap.min.js"></script> <script src="https://www.doogle.com/GSAP/00_TEST/js/script.js"></script>

Hi Rodrigo, Thanks a lot! It's working :- ) In summary If I use the link directly for the plugin: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Flip.js"></script> then it works! The Flip.js file I downloaded (included in the GSAP libraries) looks completly different when I compare it to the JavaScript in the URL above. Quick note: - If I copy the JS from the URL into a local file and then reference it in the html then it also works fine. - The reason I'm trying to do a simple 'localised' version (i.e. all the JS/CSS files 'contained' locally to the webpage) is to allow offline functionality. A wierd requirement I know but it's for a reason ;- ) - Final question: But I downloaded 'gsap-member.zip' (from GSAP home page) to compare the plugins (from my original gsap-public.zip). I couldn't see a difference. How do I reference either the latest CDN links or a 'hack' to see a list of the files available? Does CDN make files obsolete after a number years? Anyrate - thanks again!

Thanks for the reply. I can see why you'd want the minimal demo. The zip file is 99% the code from https://codepen.io/GreenSock/pen/eYdyVVe - the only lines I've added are to reference the Flip plug-in in the <head> of the html file (the JavaScript and CSS are the same - only in subfolders. The code I've added in the header is: <script src="js/gsap.min.js" defer></script> <script src="js/Flip.js" defer></script> <script src="js/script.js" defer></script> I've tried adding a '.' (some online tutorials say you need this for a relative path), I've tried the script tag in the body, I've tried the order of the scripts and not defering them etc. I'm using MS Expression as an editor - but that shouldn't make any difference (I don't think). Thanks Andy PS: In a way it aplies to other tutorials (for exampe TextPlugin with no working results so I think it might be my way of adding the plugin javascript. MS Expression can see the file and I've kept the naming the same btw).

Hi there - my first post so definately 'dumb question alert' but I've attached the html, css and js to get the Flip plugin to work. I've put in relative links etc but no amount of re-arranging or alternative suggestions seems to work. It's from the codepen.io example so it's definately my fault. However - any help appreciated. (doesn't work in Chrome, FF etc.) Thanks Andy 01_Flips.zip