MarkG

Hi folks, I am new to Javascript in general and GSAP in particular. I am learning the ropes and loving every minute of it...? I have played on CodePen with some small measure of success ( ... very small) and I am now looking to integrate the learning process into a Shopify store. I have contacted Shopify and while they were very helpful and indeed were eager to help they hadn't actually heard of GSAP. Hmm! After some prodding I managed to get through to a really decent guy who had in fact used GSAP in his private endeavours but sadly he was not in a position to help me install GSAP onto the Shopify platform - other than to say that he saw no reason why it shouldn't work. The challenge: As you can see from the CodePen excerpt, I have used a very basic Tween... I am trying to replicate this in the Shopify environment with little success. I have recreated the square but I cannot seem to be able to move it. So Far: Being a novice - I apologise upfront for what will undoudbtedly be for some a trivial question but I have been at this solidly for 4 straight days now and am desperately needing some guidance. I have watched all the help videos, read the Docs and scratched my head a few times but I cannot find a REAL newbie-oriented guide on just how to integrate this great tool into my website... The trials & tribulations: I have joined the GSAP community and downloaded the script files and uploaded them to my site - I referenced these scripts in the HTML file and copied the relevant syntax in the appropriate files - but nothing happens. When this failed I used the CDN links from GreenSock and repeated the process but again no luck. I then went back and forth for the last 3-4 days or so trying all combinations, any other helpsites, videos, code snipets and pure luck-stuff... Alas , I now bow before my mentors and seek a helping hand into what promises to be a fantastic journey of animation ? The Questions: Simply put - How can I get all the different elements to work together? Am I doing something basically wrong or is it more complex? The Code: I have used many different code fragments and while I can get them to work on CodePen no problem I have not succesfully recreated any in the Shopify environment. So I went back to basics and used the CodePen code as shown - adding : .box { display: block; } in the CSS file to display the box (I have tried with and without this and I can only seem to get the box to appear with this little snippet) I unreservedly apologise for such a loooong first-post but my wish is that I can find a workaround to get GSAP working on my site as I have been inspired by what I have seen in the community... Much appreciated and apologies if this is not the right place to post