on mobile doesn’t work properly

Dear Ivano,

Thanks for using the Animate It!

The issue is not the delay here, but the scroll offset.
Its the offset that triggers the animation after the element is that much inside the browser window.

You can set it to a smaller value to fix it.
Simply, go to Settings > Animate It! and set the “Scroll Offset (in percentage):” to a small value, e.g. 10 or 5.

Here’s a screenshot for more info:
https://www.downloads.eleopard.in/animate-it-documentation-wordpress#note

Please let me know if this works for you.

• This reply was modified 6 years, 11 months ago by eleopard.

sorry, did you llook at my page? maybe you didn’t read weell my request…i already set 10%, 5% and others…now i have 1% on scroll offset, the minimum, but nothing changes

• This reply was modified 6 years, 11 months ago by iv m.

Dear Ivano,

Apologies for missing on the offset content mentioned by you.

The thing is, Slidein effects starts from 3000px, which is ok for larger screens, but for mobiles screens the animation happs from far outside the viewport and hence takes time to come on the screen.

This might be a simple solution, specific to your case:

Paste the following in Settings > Animate It! > Custom CSS box:

@media only screen and (max-width:767px) {
.q_elements_holder_custom_668255 .eds-animate, .q_elements_holder_custom_697303 .eds-animate{
animation-duration: 1s !important;
}
}

This is make the animatin duration to 1 second, instead of 2.5 seconds set initially. That will make the image come faste on the 2 secions having problems.

Please let me know if this works for you.

sorry, but it doesn’t work ?? leaving unchanged. So i tried to change to 1 sec the first image, and it comes faster but it is too much faster to see.

Hi eleopard, i hope it’s ok for you ;)….I’m waiting for a your precious answer, bye!

Dear Ivano,

Apologies for the delayed reply.
I got caught up in some other tasks.

Regarding the issue, the reason for late SlideIn is, the animation starts from 3000px, which is fine for larger devices. However for small ones, it starts way off the screen, and takes time to reach the viewport.

This is a simple over-ride that should help:

Remove the previously added code I sent above, and paste the following in Settings > Animate It! > Custom CSS box:

@media only screen and (max-width: 767px) {
	@-webkit-keyframes slideInLeft {
		0% {
			-webkit-transform: translate3d(-768px, 0, 0);
			transform: translate3d(-768px, 0, 0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		}

		@keyframes slideInLeft {
		0% {
			-webkit-transform: translate3d(-768px, 0, 0);
			transform: translate3d(-768px, 0, 0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
	@-webkit-keyframes slideInRight {
		0% {
			-webkit-transform: translate3d(768px, 0, 0);
			transform: translate3d(768px, 0, 0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		}

		@keyframes slideInRight {
		0% {
			-webkit-transform: translate3d(768px, 0, 0);
			transform: translate3d(768px, 0, 0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
}

I have tried it on my end, and its working fine. You can check it here:
https://animateitdemo.wpdevcloud.com/post-for-ivano/

What it does is, for screens smaller then tablet (767px and smaller), it startes the animation from 768px, i.e. just outside the viewport. Also, the SlideIn Right is added too, just in case.

Let me know if this works for you.

hi guys,
I am using this plugin and it’s relay awesome. But it doesn’t work on mobile event if I am going through https://animateitdemo.wpdevcloud.com/en_US/post-for-ivano/ this url as well.
So will please provide me some solution for mobile ?
Thank you in advance.

Hello,

Please make sure that the “Snable in Smartphones” is set to yes in Settings > Animate It!
Please see this for more info: https://www.downloads.eleopard.in/animate-it-documentation-wordpress.html#note

The thing is, smartphones usually do not have hardware to support animations. And this sometimes results in glitches.

That is why this option is by default set to no.

I have enables this option in the link:
https://animateitdemo.wpdevcloud.com/en_US/post-for-ivano/

If you check the above link now, the animations should be enabled on smartphones.

Please let me know if this works for you.