AOS animated sections disappear in page editor

[devkos]

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?

[VBebensee]

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

[FinnJohannsen]

Thank you for your help 😄

[Sjardo · Accepted solution]

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) 

[Jaycee_Lewis]

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