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) {