eleopard

Dear npoutdoors,

Apologies for the delayed reply.

Yes the animations would tend to slow down on the mobiles, as their hardware would not complacently support the “sometimes-heavy” CSS animations.

If you wish you can disable the animations on tablets and/or mobile from Settings > Animate It!

Dear Tda71,

Thanks for using the Animate It!

Regarding the issue, the Animate It!, and other custom buttons from other plugins might not be visible on Custom Page builders, as they use their own text editor instances.

However, you can still add the animations to any Divi Builder block by simply:

1. Generating the animation of your choice from the Animation Generator:
https://www.downloads.eleopard.in/class-generator-wordpress

2. Copy the animation classes, and paste them in the Custom Classes box of the Divi Block
screenshot: https://adobe.ly/2LK7czV

Please let me know if this works for you.

Dear Aaron,

Thanks for using the Animate It!

Please try the following:

1. In the WordPress backend, go to Settings > Animate It! > Custom CSS Box

2. Paste the following and Save:

@media only screen and (max-width: 767px) {
	.pause-animation-mobile {
		animation: none !important;
	}
}

3. Now add the class pause-animation-mobile on the elements you wish to pause on mobile devices.

This would make the animations stop on all screens below 768px (tablet size) where the above class it applied.

Let me know if this works for you.

Hi ,

Apologies for the inconvenience.
I did some more testing on my end, and found the following solution to be working out:

1. Remove the previous CSS and add the following to Settings > Animate It! > Custom CSS Block:

.eds-scroll-hidden{
visibility: hidden !important;
}

2. Now, again, please make sure the class eds-scroll-hidden is added with the other animation classes.
Note: I viewed the source code of https://www.watskin.com/animation-1-on-scroll/ and I did not find the eds-scroll-hidden class added with the animation classes. You have to add it manually by hand.

3. Save.

You can see this workaround in action here: http://animateitdemo.wpdevcloud.com/demo-for-lausianne/

Please let me know if this resolved the issue.

Dear Lausianne,

Along-with the above CSS. Please do the following:

With the existing classes that you are adding, please add eds-scroll-hidden class as well.

So instead of
eds-on-scroll animated fadeInRightBig duration2

Please make it
eds-on-scroll animated fadeInRightBig duration2 eds-scroll-hidden

Let me know if this works.

Dear La,

Thanks for using Animate It!

I cannot pinpoint on the issue, but it is related to the scripts not laoding on time.
These maybe the Plugin or Theme sripts.

Try this workaround:
1. Go to Settings > Animate It! > Advanced Tab > Custom CSS Box.
2. Paste the following:

.eds-on-scroll{
    opacity: 0;
}

and Save.

Now the animations should only happen once.
Let me know if this works for you

Dear ibro87,

Thanks for using the Animate It!

It looks a conflict with some other Plugin or theme.

Could you please post this link to the page where this issue is?

Dear Southafricanrob,

Thanks for using the Animate It!

I checked the website on my Android phone, and the animations are stopped like they should.

In the plugin, we detect device to disable the animations. So while you may see the animations on your PC browser when you decrease the screen size, the animations will be disabled on Phones and Tablets.

Please check the website on your phone to verify.