diff --git a/src/_config/shortcodes.js b/src/_config/shortcodes.js index 3e3f8ea..5d768de 100644 --- a/src/_config/shortcodes.js +++ b/src/_config/shortcodes.js @@ -2,14 +2,16 @@ import {imageShortcode, imageKeysShortcode} from './shortcodes/image.js'; import {svgShortcode} from './shortcodes/svg.js'; // Text animation shortcode - wraps each letter in a span with animation class -// Speed parameter scales animation duration: 0.5 = 2x slower, 2 = 2x faster (default: 1) +// Speed parameter scales animation duration: +// 0.5 = half speed, 2 = double speed. const animateText = (content, animation, speed = '1') => { const letters = content.split(''); + const speedNum = parseFloat(speed); const letterSpans = letters .map((letter) => { if (letter === ' ') return ' '; - return `${letter}`; + return `${letter}`; }) .join(''); diff --git a/src/assets/css/global/utilities/text-animations.css b/src/assets/css/global/utilities/text-animations.css index e7d22d8..5fb70d6 100644 --- a/src/assets/css/global/utilities/text-animations.css +++ b/src/assets/css/global/utilities/text-animations.css @@ -36,7 +36,7 @@ .text-shiver { display: inline-block; - animation: shiver 0.5s ease-in-out infinite; + animation: shiver calc(0.5s / var(--animation-speed, 1)) ease-in-out infinite; } .text-shiver:nth-child(2n) { @@ -65,7 +65,7 @@ .text-wobble { display: inline-block; - animation: wobble 0.8s ease-in-out infinite; + animation: wobble calc(0.8s / var(--animation-speed, 1)) ease-in-out infinite; transform-origin: center bottom; } @@ -97,7 +97,7 @@ .text-jitter { display: inline-block; - animation: jitter 0.4s ease-in-out infinite; + animation: jitter calc(0.4s / var(--animation-speed, 1)) ease-in-out infinite; } @@ -115,7 +115,7 @@ .text-bounce { display: inline-block; - animation: bounce 1s ease-in-out infinite; + animation: bounce calc(1s / var(--animation-speed, 1)) ease-in-out infinite; } @@ -133,7 +133,7 @@ .text-bob { display: inline-block; - animation: bobbing 1.8s ease-in-out infinite; + animation: bobbing calc(1.8s / var(--animation-speed, 1)) ease-in-out infinite; } .text-bob:nth-child(2n) { @@ -188,7 +188,7 @@ .text-wave { display: inline-block; - animation: wave 1.2s ease-in-out infinite; + animation: wave calc(1.2s / var(--animation-speed, 1)) ease-in-out infinite; } .text-wave:nth-child(2n) {