Integrating Shopify and GSAP

MarkGn
New Member
1 0 0

Hi folks, I am new to Javascript in general and GSAP  in particular. I am also learning the ropes of the Shopify environment and am 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 GSAP animation process into my Shopify store.

You can see a simple animation movement here - https://codepen.io/MarkGn/pen/vYymrwq

I have posted to both GSAP and now to the Shopify forums and 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 from the link above, 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 succesfully 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 homepage 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 help-sites, 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.

0 Likes