infinite blink animation with "interpolate" function

[mnlbox]

Hi @JonnyBurger,

I tried this one:

const opacity = interpolate(frame, [0, 15, 30], [0, 1, 0]);

But it's only work 1 time. I need a way to make this opacity change in an infinite mode but I didn't find anything helpful for this. 🤔
Is there any way to create infinite blink animation with interpolate function??
Or maybe I should use CSS animations like this:

.blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }

Reference: https://www.w3docs.com/snippets/css/how-to-create-a-blinking-effect-with-css3-animations.html

[mnlbox]

OK I tried this one and it worked:

	const opacity = interpolate(frame % 60, [0, 30, 60], [0, 1, 0]);

I don't know if it's a right way and official way of doing it or not. But it's working. 😄

[musafiroon]

I think you should use frame % fps than directly using a hard-coded number as fps

[JonnyBurger]

@mnlbox Yes, consider this the official way 🙂
It's just numbers and you can do math with it, this seems like the easiest solution to me as well.