Disable fade in animations on mobile devices

Support
#1

Hey guys, I’m trying to disable fade-in effects on mobile devices. I tried using:

@media (max-width: 767px) {
.js .x-column[data-fade=“true”] {
opacity: 1 !important;
}

.js .x-column[data-fade=“true”][data-fade-animation=“in-from-right”] {
right: 0px !important;
}

.js .x-column[data-fade=“true”][data-fade-animation=“in-from-left”] {
left: 0px !important;
}
}

from the following x theme thread - Disable animations on mobile but it doesn’t appear to have any effect. I’m running the latest version of Pro. If you could point me in the right direction it would be great.

With regards,

#2

Hello There,

Thanks for writing in! Is this the site, https://magmapool.ouchdigital.com/ in question? I have inspected the page and you haven’t applied the code or must have removed it already. Could you please insert it again so that we can investigate why it is not working in your site?

Thank you.

#3

Hi Ruel,

Thanks for your response. Yes, the site is as listed above. I’ve reinserted the CSS for troubleshooting. I’ve noticed that it does slow down the animation, but makes the elements jump into place rather than loading normally as it would without the fade in.

Thanks in advance,

With regards,

#4

Hello There,

Thanks for writing in! If the code makes the element to jump, please disable the fade direction instead.

This should have the fade in animation only and no fade direction is applied in the column. Upon loading the page, the column will only fade in. And adding the custom css should remove the animation:

@media (max-width: 767px) {
  .js .x-column[data-fade="true"] {
    opacity: 1 !important;
    transition: none !Important;
  }
}

Hope this helps.

#5

Hi Ruel,

Thanks for your response. In this case it isn’t possible as it is a requirement for the fade animations on desktop with direction. The .js also destroys other essential fade in elements like the off canvas header bars as well, so it doesn’t appear to be a viable fix.

I believe this has been a longstanding issue with X. Since fade-in elements are finicky on mobile and tablet devices it would be great to have the functionality to edit (change timing, direction etc) or to disable on an element by element basis. It seems like we’re locked into an ‘all or nothing’ if you want to use these elements.

It would be great to find out if there is another possible solution or workaround for this one.

Warm regards,

Bernard

#6

Hey Bernard,

I will forward your concern to our developers. They should be able to address this in our future update release.
Please bear with us.

Thank you for your understanding.

#7

New code:

/* Disabling Mobile Animations */

@media (max-width: 767px) {
  .x-column[data-fade="1"] {
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }
}
#8

Thanks for sharing @Georgich :slight_smile:

#9

is there a solution for pro theme version 6?

#10

Hey @oblaum,

The provided code will still work with Pro theme 6.0. Regretfully we do not have a built-in option setting though that you can easily turn it ON/OFF.

Cheers.

1 Like
iOS 17.3.1 - elements still blinking on mobile
#11

hello @ruenel uenel,

sounds good. this code is fine for me, but it does not work on my site.
see https://dev.berhausen.net/bewertung/

any ideas?

thanks
oli

#12

Hi Oli,

This is a custom CSS code and unfortunately, the custom coding or style does not come under the Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

#13

hello,

thanks for the feedback. i understand.
we have tried to update the css class to the actual naming.

@media (max-width: 767px){
.x-col[data-x-effect]{ 
    opacity: 1 !important; 
    transition: none !important;
    transform: none !important;
    }
}

does not work on safari and iphone –
on chrome and firefox it works (i have put the code without media, so for all screen devices, just for testing)

is there any clue for us? e.g. do we need to use javascript?

thanks
oli

#14

Hi Oli,

When testing in Safari or iPhone browser, make sure to clear the browser cache first or use private browsing mode to make sure that the browsing will load the page with your latest changes in it because most of the time, Safari will just load a cache version.

Best Regards.

#15

thanks. i am using always private browsign for testing. anyhow a developer could not solve it. i will try your ONE service for this. thanks oli

#16

You are most welcome, Oli.

#17

Here is an option that worked for me. just add the class ind-static-mobile to the element that has the effect and use this:

@media (max-width: 767px) {
  .ind-static-mobile {
    opacity: 1 !important;
    animation-name: unset !important;
  }
}

Note: I’ve only tested it with fade-in (up, down, left, right).

1 Like
#18

Hey @tonalqualityx,

Thanks for sharing your code that works for you.

Cheers.