0

I am applying to college and hence was making an online portfolio type website for my self. Its live @ yadullah.coolpage.biz (ignore the domain name, free domains you know)

Its working just fine when I run it locally, but whenever I upload it to the domain and open it, the animations don't load. After a few refreshes however, they start working.
Strange thing is that the website runs just fine when accessed from mobile phones. I've tried my own Blu Win HD LTE running Monument Browser, and a few android models. All the phones on which the site was tested on ran it perfectly. This issue persists on PC only.

All my images are web optimized. By that I mean they are all below 500kb in size. Other than that there's only text on the website. Tried Chrome and Safari, issue persists

The animations I am using are from the Animate on Scroll library. Check it out here

I really can't figure out what's going wrong.

  • What browser are you accessing the site from on PC? – AshMenhennett Dec 25 '16 at 12:20
  • @AshMenhennett Google Chrome –  Dec 25 '16 at 12:21
  • Can you post your JavaScript here? – AshMenhennett Dec 25 '16 at 12:23
  • @AshMenhennett but my java script doesn't control the animations in any way... They are controlled by the AoS library –  Dec 25 '16 at 12:26
  • Are you passing in any data to the ```init``` method from a ```script``` tag in your HTML? I.e ```AOS.init({ ... });``` – AshMenhennett Dec 25 '16 at 12:29
  • @AshMenhennett I have a seperate js file named `index` in which I have this line `AOS.init({ duration: 1200 });` I call this js in a script tag inside my html –  Dec 25 '16 at 12:35
  • I am thinking the problem is that the animations are being disabled on a large viewport. Perhaps try overriding the default ```disable``` property value. Try passing in ```null``` or a condition that will not be met. I.e ```AOS.init({disable: window.innerWidth < 0});```. https://github.com/michalsnik/aos/blob/master/README.md#disabling-aos – AshMenhennett Dec 25 '16 at 12:39
  • @AshMenhennett then why are the animations working locally? –  Dec 25 '16 at 12:49
  • My bad. I misread. Check the JavaScript console when you load your site (not locally). Perhaps AOS is not being loaded. – AshMenhennett Dec 25 '16 at 12:50
  • @AshMenhennett Yes that fixed the issue... But now the animations are way faster –  Dec 25 '16 at 12:55
  • Just alter the duration property of AOS to fit your preference. – AshMenhennett Dec 25 '16 at 12:56
  • @AshMenhennett I did... the final statement is this, but the issue reappears when I do this - AOS.init({disable: window.innerWidth < 0, duration: 1200 }); –  Dec 25 '16 at 13:00
  • Are you using any html element attributes like ```data-aos-duration```? – AshMenhennett Dec 25 '16 at 13:00
  • @AshMenhennett my bad.. the file hadn't uploaded properly... please write that as an answer so that I can mark it correct –  Dec 25 '16 at 13:02

1 Answers1

0

I am thinking the problem is that the animations are being disabled on a large viewport. Perhaps try overriding the default disable property value. Try passing in null or a condition that will not be met. I.e 

AOS.init({disable: window.innerWidth < 0});
AshMenhennett
  • 1,095
  • 4
  • 14
  • 25
  • Did that, the now the animations do load, but sometimes they still don't work randomly –  Dec 25 '16 at 14:43