10f-css-animations/src/animations/showUp/showUp.js

Simple and fancy css animations for your projects

import { importCssFile } from "../shared/js/importCssFile.js";
import { addStyleAttrToVisibleChildren } from "../shared/js/addStyleAttrToVisibleChildren.js";

importCssFile("/src/animations/showup/style.css");
importCssFile("/src/animations/shared/css/atomicDisplay.css");

// SET THE INITIAL STATE TO START THE ANIMATION
const setAnimationInitialState = (showUpChildren) => {
    for (let showUpChild of showUpChildren) {
        showUpChild.style.transition = "opacity 0.5s ease-in-out";
        showUpChild.style.opacity = 0;
    }
};
setAnimationInitialState(document.querySelectorAll(".showUpGroup > *"));

// ACTIVATE THE ANIMATION
let showUpGroups = document.querySelectorAll(".showUpGroup");
window.onscroll = () => {
    for (const showUpElement of showUpGroups) {
        addStyleAttrToVisibleChildren(showUpElement, "opacity", 1);
    }
};