12
\$\begingroup\$

I'm not sure if this could be more efficient because I don't think I should need 2 keyframe loops in addition to the for loop?

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

for i in (10..19)
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)


for i in (1..9)
$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) 
\$\endgroup\$
  • 1
    \$\begingroup\$ You might stir up a little more interest if you provide a link to a demo on something like sassmeister.com. I couldn't get the one on the Stylus site to work with pasted code. \$\endgroup\$ – cimmanon Sep 4 '14 at 18:43
  • \$\begingroup\$ We would love to have you as a regular Code Review user, please update your username and join us in The Second Monitor \$\endgroup\$ – Malachi Sep 12 '14 at 15:15
  • \$\begingroup\$ does the answer below satisfy your question? the amount of the bounty that is awarded is greater if you award it manually than if you let it automatically award. \$\endgroup\$ – Malachi Sep 12 '14 at 15:51
3
+50
\$\begingroup\$

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

    $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.


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) 
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.