Elements are not visible in the Oxygen editor when using animate on scroll

Tags:
,

When setting up animation effects, sometimes you may come across a situation that animated elements are not visible in the Oxygen editor. Usually, you just need to refresh the page or re-select the animation effect and then you will see the element again. But it is inconvenient to do this every time, especially if there are several animated elements on the page.

Just add this CSS code to the stylesheet and the animation effects will only work on the frontend, and the elements will always be visible in the Oxygen editor:

#ct-builder [data-aos] {
    opacity: 1;
    transform: translate(0) scale(1);
}

E.g.:

Elements are not visible in the Oxygen editor when using animate on scroll

arrow-up