CMS Development

devkos
Member

AOS animated sections disappear in page editor

SOLVE

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?

0 Upvotes
1 Accepted solution
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

AOS animated sections disappear in page editor

SOLVE

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) 

View solution in original post

4 Replies 4
VBebensee
Contributor

AOS animated sections disappear in page editor

SOLVE

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
Participant

AOS animated sections disappear in page editor

SOLVE

Thank you for your help 😄

Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

AOS animated sections disappear in page editor

SOLVE

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
Community Manager
Community Manager

AOS animated sections disappear in page editor

SOLVE

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes