Hello

Are you having this issue on a particular browser? Testing in both Firefox and Chrome, we are unable to replicate any issues.

Ciaran

Sorry, only my Chrome browser is affected - IE and Edge works great. It seems that one addon is blocking parallax and animate on scroll effects. Could you please point me what could cause this issue? Other websites using parallax effect works for me - the issue is only with J51 templates.

Hi Ciaran again, I did some analyze on this and have something important. Interesting is that only some computers (vendor HP) and only some templates have this issue in Google Chrome browser - for example Beaumont and newer does not work, but Ashley or Fedora work like a charm. I also do not understand why only HP laptops are affected, but I have already 2 cases - there must be an applications affecting this issue, but as I already mentioned, some templates work. Could you please check what has been changed since Beaumont template and find a solution for this? Please let me know, if I can assist you.

Hello

Strangely we are unable to replicate any issues with animations in the Chrome browser. May I ask what version of Chrome are you using?

Ciaran

I have always the latest version of Google Chrome and fully agree with you, it is very strange - especially why Ashley, Fedora, Classic (and some more) work and newest templates like Sophia, Hayley, Kaylee, Juliet and others DONT :-(
Didn't you change something in the CSS or any library?

Nothing in the animations library has changed. Other CSS has changed but without been able to replicate the issue, it becomes very difficult to pinpoint what, if any, CSS may be causing this issue. I will test as many environments over the coming days as possible and hopefully, we can replicate this issue.

Ciaran

Ciaran, I can provide you access to my laptop via Teamviewer. If you agree, please contact me via email.

I have the same issue... I've got an HP Envy laptop w/ Windows 10 and scrolling doesn't work on chrome or Firefox. Have issues w/ ajax ordering on certain backend components as well. Everything works fine on Edge... Heard this is a backhanded way of forcing people to go to Edge... Really hope they put out a fix for this.

Steph H.

Hi Ciaran, I have downloaded your latest template Robyn and the result is: parallax effect works now but animate on scroll don't. As williams mentioned, the same issue is also with Firefox. My laptop is HP Spectre 13 and second is HP EliteBook 820 G3.

Hi Ciaran, any update? Any idea why only HP laptops are affected? In latest template (Robyn) is parallax working, so you had to change something. William (Steph), can you confirm the same on your laptop?

Hello

Does the animate on scroll work for you in our latest template?... http://www.joomla51.com/demo/0157/index.php/features/animations-on-scroll

Ciaran

Hi Ciaran, NO it doesn't work - only Parallax effects

Thank you

It is very difficult for us to resolve this issue without being able to replicate it. I think our only option is to change the script used to create the animate on scroll effect to a non-jQuery version.

Ciaran

AOS is a good option that has been working for me. it would be great if perhaps this library could be implemented in themes instead?

https://github.com/michalsnik/aos
https://michalsnik.github.io/aos/

Sincerely,

Steph

HI Steph

The issue with AOS is it requires a set data attribute to trigger animations. For Joomla it is best that animations are triggered by classes as all modules have a 'Module Class Suffix' field.

An alternative library that is suitable is wow.js. To enable wow.js try the following customisation...

1. Remove the following from your templates scripts.php (../templates/[YourTemplate]/inc/scripts.php - approx. line 66)...

if($this->params->get('animatecss_sw'))  {

    // Animate on Scroll

    $document->addScriptDeclaration('

        Modernizr.load({  

          test: Modernizr.touch,  

          yep : "", 

          nope: "'.$this->baseurl.'/templates/'.$this->template.'/js/jquery.visible.js"  

        });

    ');

}

2. At the end of your templates index.php (../templates/[YourTemplate]/index.php) just before the closing body tag ( < / b o d y > ) add the following...

<script src="/https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

<script>

	var wow = new WOW(

      {

        boxClass: 'animate',

      }

    );

    wow.init();

</script>

Does this work for you? If not could you please post a URL to an example of your animation.

Ciaran

Hi Ciaran, this solution doesn't work for me. For animate on scroll I have implemented plugin from EDSanimate https://www.downloads.eleopard.in/animate-it-demo - classes from https://daneden.github.io/animate.css. For me is bigger issue the parallax effect where I have no substitute, but as I mentioned, in last template Robyn it works lika a charm.

Hello

We have just updated the Sophia template so it uses a vanilla JS library for the parallax effect (same as Robyn template). To resolve try updating your template to this latest download (https://joomla51.com/tutorials/joomla-basics/updating-your-joomla-template).

Ciaran

Works - thank you! Could you please let me know how to replace this library? I have more than 10 templates with legacy library.

Hello

Replace the following in your templates index.php...

https://gist.github.com/ciar4n/715339bc68b8c8281443a789b6d5c87f

With...

https://gist.github.com/ciar4n/7fb87854e6ae7f56f9222e2a6342c537

Ciaran

Dear Ciarán, since the update to Joomla 3.9.8. and also now still in Joomla 3.9.10 the animate on scroll function is not working in Firefox (updated latest version) on my Acercomputer. In Chrome and Edge everything is still fine. I have tried what you adviced Marcel Havik to replace in the commands in script php and index.php, but I have the same result as Marcel (had in Chrome HP), in Firefox Acer the Animation on scroll is now in working in my Stockholm template. I have updated the Gridgallery in which I use the animation on scroll, but this did not have any effect as well. Since more people seem to have this problem in different ways (I also checked your animate on scroll version in your latest template, which does not show in firefox as well) I was wondering if you had already found a solution.
Thank you
All best, Annechien