I also moved some variables around to merge them and use them in other expressions.
like
animation (heights- + i) 0.75s (n/80)s linear forwards
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
you create $keyframe-name to hold the value heights- + i when you could have just put that expression into @keyframes{heights- + i}, but since we merged the two for loops into one we can use $keyframe-name like this
$keyframe-name = (heights- + i)
animation ($keyframe-name) 0.75s (n/80)s linear forwards
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
and do the same thing inside the else statement
$keyframe-namex = (heightsx- + i)
animation ($keyframe-namex) 0.75s (i/80)s linear forwards
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
I also moved some variables around to merge them and use them in other expressions.
like
animation (heights- + i) 0.75s (n/80)s linear forwards
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
you create $keyframe-name to hold the value heights- + i when you could have just put that expression into @keyframes{heights- + i}, but since we merged the two for loops into one we can use $keyframe-name like this
$keyframe-name = (heights- + i)
animation ($keyframe-name) 0.75s (n/80)s linear forwards
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
and do the same thing inside the else statement
$keyframe-namex = (heightsx- + i)
animation ($keyframe-namex) 0.75s (i/80)s linear forwards
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
- 29k
- 11
- 86
- 188
for i in (1..19)
.l:nth-child({i})
n = (20 - i)
height 0
if i >= 10
margin-left ((n * n) * (1.25/n)) + 17 px
box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (n * 1.05) + 0px
animation (heights- + i) 0.75s (n/80)s linear forwards
n = (20 - i)
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
else
margin-left ((i * i) * (1.25/i)) + 17 px
box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (i * 1.05) + 0px
animation (heightsx- + i) 0.75s (i/80)s linear forwards
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
for i in (1..19)
.l:nth-child({i})
n = (20 - i)
height 0
if i >= 10
margin-left ((n * n) * (1.25/n)) + 17 px
box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (n * 1.05) + 0px
animation (heights- + i) 0.75s (n/80)s linear forwards
n = (20 - i)
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
else
margin-left ((i * i) * (1.25/i)) + 17 px
box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (i * 1.05) + 0px
animation (heightsx- + i) 0.75s (i/80)s linear forwards
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
for i in (1..19)
.l:nth-child({i})
n = (20 - i)
height 0
if i >= 10
margin-left ((n * n) * (1.25/n)) + 17 px
box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (n * 1.05) + 0px
animation (heights- + i) 0.75s (n/80)s linear forwards
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
else
margin-left ((i * i) * (1.25/i)) + 17 px
box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (i * 1.05) + 0px
animation (heightsx- + i) 0.75s (i/80)s linear forwards
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
Based on what I can tell of these three loops is that they are not nested, which means that you are running one loop for the whole range of 1-19 another loop for the range of 1-9 (which you already went over once) and another loop for the range of 10-19 which you have already looped over as well. and the first loop that goes over the entire range already divides the top half from the bottom half to change other things, I may be looking at this all wrong, but I put the last two loops inside the first loops if-then statements and came up with this
for i in (1..19)
.l:nth-child({i})
n = (20 - i)
height 0
if i >= 10
margin-left ((n * n) * (1.25/n)) + 17 px
box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (n * 1.05) + 0px
animation (heights- + i) 0.75s (n/80)s linear forwards
n = (20 - i)
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name}
0%
height 0
91%
height ((n + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((n + 38) * 4.4) px
opacity (n/6)
if i == 10
height ((i + 43) * 4.4) px
opacity (i/6)
else
margin-left ((i * i) * (1.25/i)) + 17 px
box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
width (i * 1.05) + 0px
animation (heightsx- + i) 0.75s (i/80)s linear forwards
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex}
0%
height 0
91%
height ((i + 4) * 1.4) px
98%
height ((i + 38) * 5.4) px
100%
height ((i + 38) * 4.4) px
opacity (i/16)
I agree with @Cimmanon in that you would get more answers to this question if we had somewhere that we could run the code and tinker with it a little bit. I assume that you would have done it this way to begin with unless there was another reason for doing it this way.