on mobile doesn’t work properly

  • iv m

    (@ivanomartiello)


    6 years ago

    hi guys, very nice this plugin, but it seems doesn’t work very well on mobile. In desktop is ok, in mobile i notice a delay (i don’t set delay) too big, so if you check my page you can see in the “I Nostri Servizi” section the two images (wddding in church and harp in wedding) they doesn’t animate well. I would have soon the image when i scroll (so i set 3% on scroll) and a slow animation (so i set 2 second slide from right o left) to have a good effect, but i ‘m not able to achieve it, caqn you help me? thanls a lot!

    • This topic was modified 6 years ago by iv m.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author eleopard

    (@eleopard)

    6 years ago

    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 ago by eleopard.
    Thread Starter iv m

    (@ivanomartiello)

    6 years ago

    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 ago by iv m.
    Plugin Author eleopard

    (@eleopard)

    6 years ago

    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.

    Thread Starter iv m

    (@ivanomartiello)

    6 years ago

    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.

    Thread Starter iv m

    (@ivanomartiello)

    6 years ago

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

    Plugin Author eleopard

    (@eleopard)

    6 years ago

    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:
    http://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.

    atulbiz4solutions

    (@atulbiz4solutions)

    5 years, 10 months ago

    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 http://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.

    Plugin Author eleopard

    (@eleopard)

    5 years, 10 months ago

    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:
    http://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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘on mobile doesn’t work properly’ is closed to new replies.