Animation loading delay on mobile

Support
#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,

#22

You’re welcome.

#23

So, just for you guys to check, I have taken the cornerstone “scroll animation” off the homepage, and added it to a temp page.

This is the page with my own custom css animation, you can see how quick it loads on a mobile:

This is the one using cornerstones scroll animation:

#24

Hey @oriol,

Thank you for sharing the comparison for the animation delay. There will be an update regarding on this issue. We cannot give you ETA but rest assured that they will look on this issues. Please stay tuned.

Thank you.

#25

Awesome! thanks.

#26

You’re welcome, @Oriol.

#27

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.