Change a value using timeline

[JamesGrubb 10 Likes (Newbie)]

Hello Im using Paper.js to create a Shape and trying to use Gsap to change the number of the shapes sides. I thought I would use gsap to run a function every second but not quite sure how to use Gsap when the there is no first argument? Thanks in advance

 

the edited code is bellow

let sides;
const randomSides = () => {
  sides = [3, 4, 5, 6, 7, 8][Math.floor(random(0, 6))];
};

const tl = gsap.timeline();
tl.to(sides, { duration: 1, onComplete: randomSides(), repeat: -1 });
const shape = new paper.Path.RegularPolygon({
  sides: sides,
  radius: 20,
  fillColor: "black",
  position: view.center
});

 

See the Pen NWaBExv by limitedunlimited (@limitedunlimited) on CodePen

[OSUblake 18,474 Likes (Superhero)]

If you want to run something over and over, you can do this.

 

gsap.to({}, {
  duration: 1,
  repeat: -1,
  onRepeat: randomSides
})

 

However, your shape is not going to magically change just because the sides variable changed. You would need to update your shape using paper's API.