/* * Scroll entrance animations. * * Reproduces the current site's motion. Elementor ships an animation bundle plus a * waypoints library to do this; here it is CSS keyframes driven by one * IntersectionObserver, which is a few hundred bytes. * * Timings match Elementor's defaults: 1.25s normal, 2s for `animated-slow`. Transforms * are translate3d at 100% of the element's own size, as animate.css does, so the * movement reads the same. * * Elements are only hidden when JavaScript is available (`.js` on ). Without it * everything renders immediately rather than staying invisible. */ .js [data-anim] { opacity: 0; will-change: opacity, transform; } .js [data-anim].is-visible { opacity: 1; animation-duration: 1.25s; animation-delay: var(--anim-delay, 0ms); animation-fill-mode: both; animation-timing-function: ease; } .js [data-anim].is-visible[data-anim-speed="slow"] { animation-duration: 2s; } .js [data-anim="fadeInUp"].is-visible { animation-name: fadeInUp; } .js [data-anim="fadeInDown"].is-visible { animation-name: fadeInDown; } .js [data-anim="fadeInLeft"].is-visible { animation-name: fadeInLeft; } .js [data-anim="fadeInRight"].is-visible { animation-name: fadeInRight; } .js [data-anim="fadeIn"].is-visible { animation-name: fadeIn; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } /* * Motion is decoration here, never information. Anyone who has asked their system to * reduce motion sees the finished state immediately. */ @media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1; animation: none !important; will-change: auto; } }