Getting Started with Shopify and GSAP

[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

 

See the Pen vYymrwq by MarkGn (@MarkGn) on CodePen

[PointC]

Hi @MarkG 

 

Welcome to the forum.

 

If your animation is working correctly in CodePen but not on your Shopify site, it sounds more like a question for the Shopify forums or support email. If you have any GSAP questions, we're more than happy to help with those.

 

Happy tweening.

 

[Visual-Q]

As PointC said it's beyond the scope of this forum to investigate how to set things up for every platform out there.

 

I would expect there must be some shopify documentation to assist with loading external  javascript you'll have to chase that down yourself. Assuming you've got that far here's a few basic rules of thumb that may help.

 

1. Verify gsap is loaded you can inspect in the browser tools to look for it in the source code should be in the footer area of the page code.

2. Verify your animation file is being loaded AFTER gsap.

3. Check the console for any errors such as not finding your target elements and add some console logging at critical points so you know if the code is executing.

4 Consider executing animation after a window load event to make sure the DOM and assets are ready. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

 

 

[GreenSock]

This also might provide some tips: 

https://www.google.com/search?q=load+a+javascript+file+in+shopify&oq=load+a+javascript+file+in+shopify

 

Unfortunately, I am not at all familiar with Shopify but like the others said, it should be totally possible to use GSAP there because GSAP is pure JavaScript, so it's just a matter of loading a JavaScript file. I really wish I knew more about Shopify to advise you.