How can I successfully integrate GSAP into my Shopify store?

MarkGn · ‎02-17-2021

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.

Ryan_XhaleCity · ‎08-03-2022

I too was looking for the answer

Ccommerce711 · ‎08-21-2024

Hey Mark! I know this is years later but sometimes we still want answers! (At least I always do)
Incorporating GSAP into shopify seems to work one of 3 ways.
One is calling it from the library and using it in theme liquid instead of a CSS class folder you would need a JS folder and the proper call with the script.

The other way is to use HTML blocks and make sure the JS (GSAP) is at the bottom of the page.

For Adding to theme example

In the theme editor, locate and click on theme.liquid under the Layout section.
Add the following script tag inside the <head> section or just before the closing </body> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Or/And you can inline JS in Liquid File
f you want to add GSAP animations directly in a template file, open the relevant .liquid file (e.g., index.liquid for the homepage).
Insert your GSAP code within a <script> tag:

This script tag allows to play nicely with shopify
I got these ideas watching people use GSAP with Wordpress and elementor and found out the placement is the same

Tips:
- Lazy Loading: Consider using lazy loading for animations on elements that appear below the fold to improve page load times.
- Conditional Loading: If you only need GSAP on certain pages, use Liquid conditions to load the GSAP library and scripts selectively.

How can I successfully integrate GSAP into my Shopify store?

How can I successfully integrate GSAP into my Shopify store?

Tips:

Community Blog Articles