topic Re: AOS animated sections disappear in page editor in CMS Development

AOS animated sections disappear in page editor

devkos — Wed, 10 Aug 2022 14:12:04 GMT

Hi there,

I was using AOS animations (https://github.com/michalsnik/aos) library developing my pages. All works fine. However, when I edit modules in HubSpot's page editor the content disappears. As soon as I start changing the text for example.

From what I can see, AOS doesn't get refreshed when modules are getting reloaded (to display new content I add). So I wanted to disable AOS completely when in HubSport page editor and done the following:

if( window.hsInEditor ) { AOS.init({disable: true}); } else { AOS.init(); }

However, the issue is still there. Looks like JavaScript is disabled with that code above, but CSS from AOS still applies, so it makes all sections to be with opacity: 0;

Is there a way to fully disable AOS in page editor? There is a long way to do it which is

{% if request.postDict.inpageEditorUI %}data-aos="fade-up" .....

but I don't want to add request.postDict.inpageEditorUI everywhere I have used AOS. Can anyone help, please?

Re: AOS animated sections disappear in page editor

Jaycee_Lewis — Wed, 10 Aug 2022 23:43:01 GMT

Hi, @devkos 👋 Welcome to the community! Let's see if we can get the conversation going for you. Hey @Indra @Mark_Ryba @Sjardo, do you have any experience you can share with @devkos?

Thank you! — Jaycee

Re: AOS animated sections disappear in page editor

Sjardo — Thu, 11 Aug 2022 06:10:55 GMT

Hi,

I'm not familiar with AOS, but if it's just the CSS, you can also make add quick piece of js that removes all the oas attribute's when it's in the editor.

if( window.hsInEditor ) { AOS.init({disable: true}); document.querySelectorAll("*").removeAttribute("data-oas"); } else { AOS.init(); }

Something like this (did a really quick write down tho, probably wont work)

Re: AOS animated sections disappear in page editor

VBebensee — Mon, 19 Dec 2022 08:03:42 GMT

Hi together, the solution was very easy 😉 Look at this webseite: https://michalsnik.github.io/aos/
At the footer of that site you see the solution. Copy both cdn sources to the settings from your hubspot. Go to website - sites and then place the css and js urls in the header. The initial aos in the footer. Thats it 🙂

AOS will work 🙂

Volker

Re: AOS animated sections disappear in page editor

FinnJohannsen — Mon, 19 Dec 2022 08:11:30 GMT

Thank you for your help 😄