Aos: Content not showing when printing

[Crazy-Ivancz]

When printing newly loaded page, content outside of viewport is not printing

[michalsnik]

Ah, this is worth considering to fix in css. Right now I'm not checking for print media query and just hide anything with data-aos when those elements don't have aos-animate class.

Good point @DavidMarekCZ. Thanks for pointing this! :)

[burnaDLX]

Came across the same issue in my last project and solved it with a wildcard rule like this

@media print{
    *[data-aos*=""] {
        display: inline-block !important
    }
}

[neiltking]

Adapting @burnaDLX solution (many thanks for that), I am using the following to reset the scaling and transformation so it prints as if the animations have finished:

@media print{
    [data-aos] {
        display: block !important;
        opacity: 1 !important;
        transform: translate(0) scale(1) !important;
    }
}

[spacecakes]

The above workaround doesn't work in my case, since I've got very specific CSS rules for print which removes most images entirely to print my site as a classic book-style document.

Is there a way to disable AOS entirely for print?

I experiented by wrapping an @import rule for aos.css in a @media screen but it doesn't seem to work.

EDIT: Actually, what does seem to work is just adding media=screen" to the HTML, like so: <link rel="stylesheet" href="aos/aos.css" media="screen" />

[michalsnik]

I wrapped all AOS styles inside @media screen {} in v3.0.0-beta.3. Enjoy!
If you'll encounter any issues let me know :)