Animation not always visible on iPhone

Question

I used the fade up animation on some of the text. It works great on the desktop, but on the mobile, if I scroll slowly, the item(s) do not always appear. I can scroll further down and back up and then it will appear. I attached an example display. The temp address is jcs.formulos.com/index.html where the animation is not always working. I'm using iPhone 10, and the browsers I tested were on safari and chrome. Let me know if you need additional information. If you don't find anything next week t…

SemiColonWeb · Accepted Answer

Hello,

Thanks for providing more information and debugging steps for this issue. The bug appears to be with the Intersections Observer calling 1 Event on a 2 Animation Element simultaneously which is why the Animation Function is not triggered correctly. Consider replacing the existing optionsInOb Object in the js/plugins.animations.js File with the following Code:


let optionsInOb = {
	threshold: 0.5
}

This should fix the issue as we are not getting any more errors with this. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

cmwhite312 · Answer

I replaced

let optionsInOb = {
rootMargin: '0px'
}

with

let optionsInOb = {
threshold: 0.5
}

but the issue is still there. If I scroll slowly or stop where the first part appears and stop scrolling - when I scroll further down, the other items doesn't show until I scroll past that section and then scroll back up. Let me know if you think of another possible solution. Meanwhile, Ill change the js setting back and disable animations on mobile.

cmwhite312 · Answer

Do I insert the script like below to cancel mobile animation on mobile? It doesn't seem to work. :(

if( $animationEl.length < 1 ){
return true;
}

if( $('body').hasClass('device-xs') || $('body').hasClass('device-sm') || $('body').hasClass('device-md') ) {
$animationEl.addClass('animated');
return true;
}

Semicolon Web · Answer

Hello, We have checked this out and it appears to be working perfectly fine for us. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience. Additionally, if you are using the File, make sure that you …