Animation loading delay on mobile

Support
#1

So I have my text in the hero section animation in, and it looks great on the desktop, and ipad.

But on a mobile phone, there seams to be a big delay before the text loads in:

The page has fully loaded, so im not sure why its delaying.

#2

Hi Oriol,

Thanks for reaching out.
I have checked your website on my Android mobile and found the problem you described. It might be due to the delay set to the Animation set through the Effect module and we need to investigate that. I would request you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

Thanks. I have the delay on the 1st text set to 0, and its still delaying by quite a lot. Thanks for checking it out, creds in the secure note.

#4

Hello Oriol,

There is a built-in CSS in the stack for the animation delay and transition. You can override it by using this CSS code to make sure that it is set to 0 or no delay at all.

@media (max-width: 767px){
   [data-x-effect] {
    animation-duration: 0 !important;
    animation-delay: 0 !important;
   }
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#5

Thanks, I added this code to the global CSS, cleared all the caches, and checked in an incognito widow…the issue persists. And dont get me wrong, I still want it to animate in, I just dont want that big delay before everything loads in.

#6

Some of this might be tied to phone speed as I can get pretty good results depending on the browserstack phone. To just remove the delay you can use Runel’s code, but remove the line that starts with animation-duration so just the delay will be removed. Maybe even try to not have animations for any text you want to show up right away in the first hero. I’m liking the new look of the site btw.

#7

Thanks for the compliment :slight_smile:

I adjusted the code, but still no change. This is with my phone connected to a 50 Mbps network.

I want things to load in, and as you can see on a desktop and an ipad, it loads pretty quick…

But there is still a 3-4 second delay before the whole things animates in on the mobile…

Id love it to animate in as it does, but without that long delay before it all starts, I hope this is possible.

#8

Any news on this issue?

#10

Ok, so I can disable the animation completely in the header, for mobiles using this code:

@media (max-width: 767px) {
  .x-section:first-child [data-x-effect] {
  animation: none !important;
    transition: none !important;
  }
}

However, the delay persists.

The above code works, but if I add this:

@media (max-width: 767px) {
  .x-section:first-child [data-x-effect] {
  animation-duration: 1000000s !important;
    animation-delay: 1000000s !important;
  }
}

It doesn’t seam to have any effect? the delay doesn’t go up to 1000000 seconds. Which makes me think that delay is somewhere else? How do I get rid of the delay?

#11

I have done further testing, if you go to this page: https://staging-logoglo-newsite.kinsta.cloud/bits-n-bobs/ I have disabled the animations (turning them off in cornerstone in the effects panel) and you will see there is no delay now…and this is the same content as the homepage.

This is how its loading with the effects turned off:

Now, on the homepage, I have the animations disabled for mobile, but you will see , there is still a delay in loading. So on a mobile, it seams like the site is taking too long to load, which could cause clients to bounce.

I still want the animation’s on the mobile, as it looks good, but I just want to remove that delay please.

Its getting a little frustrating that you are not getting back to me.

#12

Hey Oriol,

I have checked your site in Pingdom and it has a grade of B which loads the page in 1.8 seconds. You can check out more details here including the recommendations on how you can speed it up:

Perhaps, these video demos can help you speed up the site as well:

Best Regards.

#13

:frowning: it has nothing to do with page speed…its to do with how the loading is perceived by a user.

The site is very optimized. The site loads very fast, the issue is the delay before the animation loads on mobiles.

I like the animation, but there is a 3 second delay before it starts:

I just need to disable whatever is causing that delay on a mobile (and its only mobile, as the delay isnt present on ipads or desktop.laptops) I know its somewhere, and is probably easy to do with css, but all of the above threads codes, didnt have any effect.

In one thread above, I explain how I disabled the animation on the just the text using css, but even that still has a delay, I even tried upping the delay to 10000s, to test, and that didnt have an effect.

To prove its hasnt got anything to do with pagespeed, and optimization, this is the EXACT same page, just with the animations manually disabled (in the effects panel in cornerstone) You can see how fast it loads.

There is no delay whatsoever. That is what I’m trying to achieve, but only on a mobile, but still have the animations…if you see the 1st video, the animations load after a long 3 second gap, giving the illusion that the page is taking longer to load, when it really shouldn’t, the page loads in 3-400ms once cached…there is no excuse for that 3 second pause.

I feel like you have skipped all of my messages above. Please read over them, they explain exactly whats going on.

In resume…I want the animations, they look good, but I want to get rid of that long gap before it loads.

#14

I have this code to remove any animation from the text:

@media (max-width: 767px) {
  .x-section:first-child [data-x-effect] {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-timing-function: linear !important;
    animation-fill-mode: forwards !important;
  }
}

That delay seams to be coming from this:

image
image1920×1080 511 KB

The page with the animation disabled in cornerstone looks like this:

image
image1920×1080 482 KB

So I think its this: data-x-effect="{“scroll”:true,“offsetTop”:“10%”,“offsetBottom”:“10%”,“behaviorScroll”:“fire-once”}"

I think it is that is adding the delay…how do I disable this on a mobile?

#15

To further show its your animation that is causing this strange delay…I have updated things. So in the 1st heading “affordable logo design” I have turned off the animation in cornerstone, and added my own. You will see it loads very fast, but still animates.

The rest of the text uses your animation. So the next line has an animation, but 0 delay. Yet you still se this delay im talking about.

I want to use your inbuilt animation, but I dont want this mysterious delay added on mobiles, as it gives the appearance of a slow loading site.

This is the exact same page, but using my animation css in the header: https://staging-logoglo-newsite.kinsta.cloud/bits-n-bobs/

As you can see, there is no delay.

#16

Hello Oriol,

I will forward this thread to Charlie.

Thanks.

#17

Thank you.

#18

Hi Oriol,

You are most welcome.

#19

Hi guys any news on this?

#20

Hello @oriol,

We do not have an update yet. We will bump Charlie about the issue.

Thank you for your understanding.

#21

Thank you,