Adjust heading animation-timeline

remino · Apr 7, 2024 · f1ef416 · f1ef416
1 parent c662e42
commit f1ef416
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/assets/css/_header.sass b/assets/css/_header.sass
@@ -29,15 +29,15 @@ header.sclf
 					transform-origin: center center
 
 					@supports (animation-timeline: scroll())
-						animation-range: contain 0% contain 100%, contain 30% contain 70%, contain 0% contain 100%
+						animation-range: contain 0% contain 100%, contain 0% contain 50%, contain 0% contain 100%
 
 					$child-center: math.ceil(math.div($children-count, 2))
 					@for $i from 1 through $child-center
-						&:nth-child(#{$child-center - $i}), &:nth-child(#{$child-center + $i})
+						&:nth-child(#{$child-center + 1 - $i}), &:nth-child(#{$child-center - 1 + $i})
 							--sclf-delay: #{$i * 4}
 
 							@supports (animation-timeline: scroll())
-								animation-range: contain #{$i * 4%} cover 100%, contain #{30 + $i * 4%} contain #{70 + $i * 8%}, contain #{$i * 4%} cover 100%
+								animation-range: contain #{$i * 4%} contain 100%, contain #{0 + $i * 4%} contain #{50 + $i * 4%}, contain #{$i * 4%} contain 100%
 
 					@for $i from 1 through $children-count
 						&:nth-child(#{$i})