Animate

Animate.js

import styles from "./style.scss";
import PropTypes from "prop-types";

const Animate = ({ delay, children, animateFrom, animateTo, trigger, fadeIn, zoomIn }) => {
    const finalStyles = animateTo && Object.entries(animateTo)
        .map(([key, value]) => key + "_" + value)
        .join(".");

    let fromStyles = "Animate-element animate__start";
    let actions = `addClassesDelay:${delay}:${styles["animate__end"]}`;

    if (fadeIn) {
        fromStyles += " animate__fadeIn-start";
        actions += `:${styles["animate__fadeIn-end"]}`;
    }
    if (zoomIn) {
        fromStyles += " animate__zoomIn-start";
        actions += `:${styles["animate__zoomIn-end"]}`;
    }
    if (animateTo) {
        actions += `|addInlineStylesDelay:${delay}:${finalStyles}`;
    }

    return (
        <div
            styleName={fromStyles}
            style={animateFrom}
            lr=""
            lr-revealer-triggers={trigger}
            lr-revealer-actions={actions}
        >
            {children}
        </div>
    );
};

Animate.defaultProps = {
    delay: 0,
    trigger: "screen"
};

Animate.propTypes = {
    delay: PropTypes.number,
    children: PropTypes.element,
    animateFrom: PropTypes.object,
    animateTo: PropTypes.object,
    trigger: PropTypes.string,
    fadeIn: PropTypes.bool,
    zoomIn: PropTypes.bool,
};


export default React.memo(Animate);