section { overflow: hidden; } .js-underline-animate { position: relative; display: inline-block; padding-bottom: calc(var(--space-xs)*1.2); } .js-underline-animate::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 1.5px; background: currentColor; transform: translateX(0) scaleX(0); transform-origin: center; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .js-underline-center.js-underline-animate::after { left: 50%; transform: translateX(-50%) scaleX(0); } .js-underline-animate.in-view::after { transform: translateX(0) scaleX(1); } .js-underline-center.js-underline-animate.in-view::after { transform: translateX(-50%) scaleX(1); } .js-animate { opacity: 0; will-change: transform, opacity; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease; } .animate-left { transform: translateX(-100px); } .animate-right { transform: translateX(100px); } .animate-up { transform: translateY(100px); } .js-animate.in-view { opacity: 1; transform: translate(0, 0); } @media (prefers-reduced-motion: reduce) { .js-animate { opacity: 1 !important; transform: none !important; transition: none !important; } .js-underline-animate::after { transform: translateX(0) scaleX(1) !important; } .js-underline-center.js-underline-animate::after { transform: translateX(-50%) scaleX(1) !important; } }