How do I make a point pulse effect?

[lubeskih]

Hi,

I want to make a ripple/pulse effect point animation, where point animation starts at 0 radius, grows to radius of 30 and in the same time opacity goes from 100% to 0%. Additionally, I don't want the animation to loop from 0 -> 100 and then back from 100 -> 0, but only from 0->100 and then directly to 0. How do I do this?

This is something that I have currently but does not work. :-)

export const options = {
  scales: scales,
  maintainAspectRatio: false,
  responsive: true,
  bezierCurve: true,
  plugins: {
    legend: {
      display: false,
    },
  },
  animations: {
    radius: {
      duration: 2200,
      easing: "easeOutCubic",
      from: 0,
      to: 40,
      loop: true,
      fn: (from: any, to: any, factor: number) => {
        
      }
    },
    numbers: { duration: 0 },
    colors: {
      type: "color",
      duration: 3000,
      to: "transparent",
      loop: true,
    },
  },
  transitions: {},
  elements: {
    point: {
      radius: 10,
    },
  },
};

[kurkle]

Its a shame the context is not passed to the fn, would make it cleaner. But it can be done with an external variable: https://codepen.io/kurkle/pen/VwBZPba

[lubeskih]

@kurkle exactly what I need, thank you! One more thing, when the animation reaches the limit (full radius and transparent), it stops and then restarts after few seconds (5-10 ?). Do you know how do I make it restart right away? So a continues loop of ripple.