Everything posted by anobjectn
GSAP not working after server upload
anobjectn replied to Kingsley88's topic in GSAPI ended up here because I had an animation (with scrollTrigger and motionPath) that ran fine in a local html file in browser but appeared not run on my web servers. In my case, there was interference from a Google Extension called See (an accessibility related developer tool, link to their page in Google Play Store). After some futile efforts to debug (I noticed the gsap transforms were being overriden by another transform), I tried what I think you should try if you get here with this sort of issue: try your thing in an incognito session or incognito/private session in entirely different browser. I know you can run extensions in incognito so some of y'all cant rule out browser extension interference quite that easily. TLDR If you are looking for a reason why your animations aren't running, check for extension interference. They can break gsap animations.
Thanks for the response, unfortunately after a couple of hours I had to replace the GSAP with CSS only because I just had to have it working. I still prefer the GSAP to the pure CSS but I couldn't see why it simply wouldn't work in the Drupal site though the code was based of a working GSAP prototype There were no errors or warnings recorded on console, no 404, I do know that the JS file were being loaded, and the hover events were firing. Its appears to simply not made any changes to the DOM. I guess I'd have to make a new test page that attempts the GSAP animation in the context of the website for you folks to really dig in, but I was hoping there was something known to cause issues that sound like what I'm seeing. Do you know of anything like that? A set of conditions that result in GSAP appearing to not run?
I hope someone can point me in a right direction here. I created a simple hover spin effect () with TweenLite and of course it works great, just as I want it to, in a bare bones prototype page: http://dev.overit.com/nysda/nysdental.org/_test/logospin/ (spinning glory, hover on button) http://dev.overit.com/nysda/nysdental.org/_test/logospin/js/main.js (the JS that runs) But in the context of the page I want to include this in, its not working at all. JS appears to load, jQuery hover functions fire fine, but the image I'm tweening gets no transform applied at all - when its in my page: [uPDATE: I couldn't leave the page with the nonfunctioning spinner, so I had to replace the non-working GSAP with pure CSS that works though not as well, See my following comment] http://dev.overit.com/nysda/nysdental.org/ (no spinning joy - the horror) http://dev.overit.com/nysda/nysdental.org/sites/all/themes/nysdental/js/build/scripts.js (the js that runs, is minified) http://dev.overit.com/nysda/nysdental.org/sites/all/themes/nysdental/js/source/scripts.js (the unminified source, search for "specialAnimations" or see line 266) I have looked for things that are missing from my prototype like perspective on parent, or other CSS style that could be conflicting in a parent or ancestor node but I'm just hitting a wall. Can anyone help me out at all? Thank you