How to generate animating like this page?

[supergaga]

https://theaeronfiles.com/aeron-transport/ipc-publications/connecting/#__tabbed_1_2

[kamilkrzyskow]

Hello @supergaga,
this site uses custom SVGs with a specific HTML/Markup setup, to mimic a sort of "layered" system. By default layers are hidden with inline CSS.

Then after clicking on the Step 1-# tabs, using JavaScript they change the CSS of each layer to display them:

• https://theaeronfiles.com/js/animate-tabs.js
• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

The animate-tabs.js file only has functions. They're called with JavaScript included in the content:

<script>
document.addEventListener("DOMContentLoaded", function() {
    animateTabs(
        0, 
        [
            ["pub1"],["pub2"],["pub3"],["pub4"],["pub5"],["pub6"],["pub7"],["pub8"],["pub9"],
        ]
    );
});
document.addEventListener("DOMContentLoaded", function() {
    animateTabs(
        1, 
        [
            ["sub1"],["sub2"],["sub3"],["sub4"],["sub5"],["sub6"],["sub7"],["sub8"],["sub9"],
        ]
    );
});
</script>

The CSS that activates the pulsing animation effect is included in the website content:

<style>
    .step {
        display: none;
    }
    .pub1, .pub2, .pub3, .pub4, .pub5, .pub6, .pub7, .pub8, .pub9,
    .sub1, .sub2, .sub3, .sub4, .sub5, .sub6, .sub7, .sub8, .sub9 {
        animation: pulse 2s infinite;
    }
</style>

The content JavaScript or content CSS could be included directly in the Markdown file, or customization could be used to extend the content block:

• https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks

Or better, use external CSS to have a central location to modify the global CSS:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

I'm not sure what's the license of the source code, couldn't find the sources of the docs.
However, I'm guessing it's Apache 2.0 based on the https://github.com/real-logic/aeron repository.

[supergaga]

@kamilkrzyskow Big thanks !!!