move to using static offset pixel value for animation distance

moderntribe · Dec 10, 2024 · 39fb091 · 39fb091
1 parent dd71599
commit 39fb091
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/wp-content/themes/core/assets/pcss/global/animation.pcss b/wp-content/themes/core/assets/pcss/global/animation.pcss
@@ -12,6 +12,7 @@
 	--tribe-animation-delay: 0s;
 	--tribe-animation-speed: 0.6s;
 	--tribe-animation-easing: cubic-bezier(0.39, 0.575, 0.565, 1);
+	--tribe-animation-offset: 50px;
 }
 
 /* -------------------------------------------------------------------------
@@ -45,7 +46,7 @@
 
 		&.tribe-animation-direction-bottom {
 			transition-property: all;
-			transform: translateY(25%);
+			transform: translateY(var(--tribe-animation-offset));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -61,7 +62,7 @@
 
 		&.tribe-animation-direction-bottom-left {
 			transition-property: all;
-			transform: translate(-25%, 25%);
+			transform: translate(calc(var(--tribe-animation-offset) * -1), var(--tribe-animation-offset));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -77,7 +78,7 @@
 
 		&.tribe-animation-direction-bottom-right {
 			transition-property: all;
-			transform: translate(25%, 25%);
+			transform: translate(var(--tribe-animation-offset), var(--tribe-animation-offset));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -93,7 +94,7 @@
 
 		&.tribe-animation-direction-top {
 			transition-property: all;
-			transform: translateY(-25%);
+			transform: translateY(calc(var(--tribe-animation-offset) * -1));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -109,7 +110,7 @@
 
 		&.tribe-animation-direction-top-right {
 			transition-property: all;
-			transform: translate(25%, -25%);
+			transform: translate(var(--tribe-animation-offset), calc(var(--tribe-animation-offset) * -1));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -125,7 +126,7 @@
 
 		&.tribe-animation-direction-top-left {
 			transition-property: all;
-			transform: translate(-25%, -25%);
+			transform: translate(calc(var(--tribe-animation-offset) * -1), calc(var(--tribe-animation-offset) * -1));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -141,7 +142,7 @@
 
 		&.tribe-animation-direction-left {
 			transition-property: all;
-			transform: translateX(-25%);
+			transform: translateX(calc(var(--tribe-animation-offset) * -1));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {
@@ -157,7 +158,7 @@
 
 		&.tribe-animation-direction-right {
 			transition-property: all;
-			transform: translateX(25%);
+			transform: translateX(var(--tribe-animation-offset));
 
 			&.is-scrolled-into-view,
 			&:not(.tribe-animate-multiple).is-scrolled-into-view-first-time {