Jump to content


Change a value using timeline

Recommended Posts

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

Link to comment
Share on other sites

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.  


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.