Animations stopped showing

The animations and styles are not working on my local host. There might be a conflict. I see that it put inline css on the page. I have a duplicate of my site online and everything works. So why are the styles not loading on local host?

Hi @bloke

I suppose there may be an issue with your localhost installation. We do use it on localhost while developing and everything seems to work fine, I just double checked it.

What is your localhost setup btw?

I did some more testing using a template and section. It will not work online too. It displays fine in the editor but when you load the page there are no styles or animations. I changed themes and deactivated all plugins.

Hi @bloke

Can you share your live page URL please?

I got it fixed. The page must have been corrupt with me trying different blocks and deactivating plugins. I tried creating a new page and it worked.

Ok I noticed a new issue. If I past more than one block from the gutenberghub on a page only the first one will show changes, styles, animations ext.

Images and icons can be changed and will display. All other color and styles do not show.

I have looked at the styles in the editor and compared them to online. The classes are being applied but the css is not (colors, fonts ect.) I have sawitched themes, created new pages, cleared cache, disabled all plugins. Here is my example and I am using this template https://gutenberghub.com/templates/gallery-4/ and my page is here just take out the x https://dev.xecxo-xrevoxlution.com/example/

Hi @bloke

Is this a custom post type?

No it is just a regular page.

This includes all css styles not just animations. Looks like its not saving the data vs. being blocked.

Hey @bloke

This shouldn’t happen on a regular page. It is an issue with custom post types and that is also fixed and in testing, will be released in next update this week.

I would request you to test again later this week once the update is available. I hope that will fix your issue.

If that won’t fix it, I would need to investigate your website specifically and may need admin access for that.

Regards,
Munir

Thanks. I updated the plugin and it didn’t fix it. I deactivated all plugins and used 2020 theme on a regular page. Could there be something in the database that needs to be cleared?

Hi @bloke

Ok, upon digging further intto this, I found that Twenty Twenty theme is enforcing this in their CSS.

/* Accessibility Settings -------------------- */
?
@media ( prefers-reduced-motion: reduce ) {
?
	* {
		animation-duration: 0s !important;
		transition-duration: 0s !important;
	}
}

This setting is causing the animation duration to set to 0. Now this also depends on your browser setting as well.

Can you try switching the theme and let me know if things works fine with other theme (test multiple themes).

Thanks

It still doesn’t work. I have tried other themes. Its not just the animations. All styles are not applied. The css is saved in the database but not being applied.