The animations on the mobile versions are delayed even though they're set to no delay

Beaver Builder
, ,
1

Here is the site :slight_smile:

http://ethos.cwpdev.xyz/home-copy-2/

Is there any way to simply shut off animations on mobile?

2

Hi Lepeep,

I’ve viewed your site and the animations are appearing instantly but are set to fade so it looks like there is delay due to the fade in.

If you want to disable animations for mobile devices, you can use the CSS below. :slight_smile:

@media (max-width: 768px) {
  .fl-animation {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transform: none !important;
            transform: none !important;
    transition-property: none !important;
    opacity: 1 !important;
  }
}
3

Hi Danny!

It worked great! Thank you so much.

4

No problem, Lepeep! :slight_smile:

5

Can you help me with another delay issue? The last line of the intro to this page listed below (“To make art. To Turn ordinary into extraordinary”) does not begin to animate unless you scroll down. Is there any way to fix this, where it animates simply by landing on the page?

http://ethos.cwpdev.xyz/about/

Here are the delays for each line -
“but” - 1.5
“I always…” 2.5
“T make art…” 4

6

The animations use waypoints so won’t kick in until the element is scrolled to. We may be able to do something using keyframes. If you leave it with me, I’ll see if I can up come up with something tomorrow. :slight_smile:

7

Thank you so much!!!

8

To fix your issue so that you have a fade in similar what you have at the moment but doesn’t require waypoints. You will first need to remove the animation from the module which has the To make art. To turn ordinary into extraordinary..

Once removed, add a custom class to that module by going to the module settings > advanced tab and add a class of custom-fade-text and save the changes.

Then go to your custom CSS and add the following:

.custom-fade-text .fl-heading {
     opacity: 0;
    -webkit-animation: fadein 2s;
            animation: fadein 2s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}

@keyframes fadein {
    0%     { opacity: 0; }
    100%   { opacity: 1; }
}
@-webkit-keyframes fadein {
    0%     { opacity: 0; }
    100%   { opacity: 1; }
}

Save the changes and publish the page. When you reload, the text should fade in but will do so immediately regardless if you scroll or not.

Please, note that you may need to tweak the CSS transition so that the text doesn’t appear before the text above.

1 Like
9

Thank you so much for your help with this and all of the other questions!