Page content is already visible before animation

Dear ,

Thanks for using the Animate It!

Looking at the page, it looks like some minor CSS conflict between the them and Plugin’s CSS.

Please try the following:

1. In the WordPress backend, Go to Settings > Animate It! > Custom CSS Box.
2. Paste the following and Save:

.eds-scroll-visible.eds-scroll-hidden{
	opacity: 0 !important;
}

Please let me know if this resolves the issue

Hello,

thanks a lot, it helped with almost every animation.

Only animation I have still problem with is starting screen on homepage. It looks like the animation triggeres twice.

Thank you,
Michal

Dear Mbehal,

Can’t seem to figure out why this is happening ??

Please replace the CSS with the following to see if it works:

.eds-scroll-visible.eds-scroll-hidden{
	opacity: 0 !important;
}
.animated{
	opacity: 0;
}

Also, in case the above does not work, please remove the eds-on-scroll class from the showcase animation. Since this is visible as soon as the page loads, no need to have it on scroll.

Let me know if any of the above solutions work for you.

Hello,

even with opacity: 0; on animated, elements are still visible on the load. It looks like a 100% animation state is triggered once before animation.

Michal

Dear Michal,

Apologies for the delayed reply.

It seems like there an issue with the loading of Plugin related JS and CSS.
This may be due to theme setting, or some other plugin.

As the script is not loading on time, the animations that are supposed to be hidden on page load are being visible, and then being visible again when the JS is finally loaded.

As a workaround, you can try removing the eds-on-scroll class for the areas visible above the fold.

Please let me know if this works for you.