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 :
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.