0

I'm playing around with css-doodle and I'm trying to make a spiraling animation in the grid.

What I want to do is to get it to alternate between spiraling out and the in again infinitely. Currently I can only get it to play the animations once even though I added the infinite argument to the animation property.

I'm trying to use two animations:

  @keyframes bg {
    0% {
      background: transparent;
    }
    0.08%, 100%  {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
  }

  @keyframes bg-reverse {
    0% {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
    0.08%, 100%  {
      background: transparent;
    }
  }

Then playing them infinitely with delays in between like this: animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;

Here is my code-pen: https://codepen.io/anon/pen/xzWxrd?editors=1000

Anyone see what I'm doing wrong here?

EDIT: added snippet. Reverse animation doesn't seem to work here though:S

html, body { 
  height: 100%; 
  margin: 0 
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.2/css-doodle.min.js"></script>
<css-doodle>
  :doodle {
    @grid: 11 / 10em;
    @shape: square;
  }
  --x: calc(0 - @row() + 6);
  --y: calc(0 - @col() + 6);
  --Absx: calc(@abs(0 - @row() + 6));
  --Absy: calc(@abs(0 - @col() + 6));
  --A: calc(@abs(@abs(0 - @row() + 6) - @abs(0 - @col() + 6)) + var(--Absx) + var(--Absy));
  --A2: calc(var(--A) * var(--A));
  --SGN: calc(@abs(0 - @row() + 6 + 0 - @col() + 6 + 0.1)/(var(--x) + var(--y) + 0.1));
  --Axy: calc(var(--A) + var(--x) - var(--y));
  --RES: calc(var(--A2) + var(--Axy)*var(--SGN) + 1);
  
  #mtv921
  animation: bg 12.1s linear calc(.05s*var(--RES)) forwards infinite, bg-reverse 12.1s linear calc(.05s*@max-col()*@max-row() + (.05s*@max-col()*@max-row() - .05s*var(--RES))) forwards infinite;

  @keyframes bg {
    0% {
      background: transparent;
    }
    0.08%, 100%  {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
  }
  
  @keyframes bg-reverse {
    0% {
      background: hsla(calc(220 - var(--RES)/7), 60%, 50%, calc(1 - 0.006*var(--RES)));
    }
    0.08%, 100%  {
      background: transparent;
    }
  }
</css-doodle>
zgue
  • 3,793
  • 9
  • 34
  • 39
mTv
  • 1,074
  • 17
  • 28
  • Am pretty sure there is some JS involved to change the value, no? – Temani Afif Jul 31 '18 at 14:49
  • What value? if you are talking about all the @max-col() and var(--RES) etc. Its from the css-doodle component. – mTv Jul 31 '18 at 14:52
  • I don't know what value, the code is pretty complicated so I am asking if there is a JS involved somewhere – Temani Afif Jul 31 '18 at 14:53
  • @TemaniAfif Yes the css-doodle has some JS in the background. The formula used to create the spiraling effect with animation delays is from here: https://math.stackexchange.com/questions/163080/on-a-two-dimensional-grid-is-there-a-formula-i-can-use-to-spiral-coordinates-in – mTv Jul 31 '18 at 14:57
  • @Paulie_D Added snippet. Please un-minus-1 me if it was you. – mTv Jul 31 '18 at 15:04

0 Answers0