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

**URL:** <https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480>\
**Category:** Beaver Builder\
**Tags:** animations, mobile, beaver-builder\
**Created:** [May 12, 2019, 11:01pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480 "2019-05-12T23:01:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lepeep](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/6a8cbe/32.png) [@lepeep](https://community.wpbeaverbuilder.com/u/lepeep)\
**Post date:** [May 12, 2019, 11:01pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/1 "2019-05-12T23:01:33Z")

</div>

Here is the site 🙂

[http://ethos.cwpdev.xyz/home-copy-2/](http://ethos.cwpdev.xyz/home-copy-2/)

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

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [May 12, 2019, 11:09pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/2 "2019-05-12T23:09:42Z")

</div>

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. 🙂

```css
@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;
  }
}
```

---

<div class="post-metadata">

**Author:** ![lepeep](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/6a8cbe/32.png) [@lepeep](https://community.wpbeaverbuilder.com/u/lepeep)\
**Post date:** [May 12, 2019, 11:14pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/3 "2019-05-12T23:14:49Z")

</div>

Hi Danny!

It worked great! Thank you so much.

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [May 12, 2019, 11:18pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/4 "2019-05-12T23:18:26Z")

</div>

No problem, Lepeep! 🙂

---

<div class="post-metadata">

**Author:** ![lepeep](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/6a8cbe/32.png) [@lepeep](https://community.wpbeaverbuilder.com/u/lepeep)\
**Post date:** [May 12, 2019, 11:25pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/5 "2019-05-12T23:25:09Z")

</div>

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/](http://ethos.cwpdev.xyz/about/)

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

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [May 12, 2019, 11:35pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/6 "2019-05-12T23:35:03Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![lepeep](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/6a8cbe/32.png) [@lepeep](https://community.wpbeaverbuilder.com/u/lepeep)\
**Post date:** [May 12, 2019, 11:42pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/7 "2019-05-12T23:42:42Z")

</div>

Thank you so much!!!

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [May 13, 2019, 5:17pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/8 "2019-05-13T17:17:37Z")

</div>

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:

```css
.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.

---

<div class="post-metadata">

**Author:** ![lepeep](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/l/6a8cbe/32.png) [@lepeep](https://community.wpbeaverbuilder.com/u/lepeep)\
**Post date:** [May 14, 2019, 1:24pm UTC](https://community.wpbeaverbuilder.com/t/the-animations-on-the-mobile-versions-are-delayed-even-though-theyre-set-to-no-delay/8480/9 "2019-05-14T13:24:40Z")

</div>

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