Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran

Hi. Sorry to add to the trouble here, but I recently switched a site in development from Robyn, where the animate on scroll was working perfectly, to Sophia, where it's not working at all in either Chrome or Safari. Page in question and other info below. All four Modules Positions Top 1, 2, and 3 a and b, have AOS directives in the Module Class Suffix. I've updated my browsers, cleared caches, etc.

Hi Annechien

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

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

Hello

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

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

With...

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

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

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

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.

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

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

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

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

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, 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?

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.

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.

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

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

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?

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