how to switch between non looped and looped sequenzes

[mindthegap]

I want to create a frame player for canvas graphics in vuejs. the mechanics work so far.

there is a "in", "loop" and "out" sequence that starts the respective animation sequence via watch properties.

 

this.animation = gsap.timeline({
        repeat: 0,
        paused: false,
        onUpdate: this.drawSprite
      }).to(this.sprite, 1, { 
        frame: 0,
        roundProps: "frame",
      });

 

now I have only one problem to somehow activate the loop. I thought I could give {repeat:1} as an object, but nothing happens.

or to change  this.animation.repeat = 1;

 

 

 if ( (this.type == "in") ){
            this.animation.fromTo(this.sprite, 1.0, { frame:0, roundProps: "frame" }, { frame:29, roundProps: "frame" });
            
          } else if ( this.type == "loop" ){
            this.animation.fromTo(this.sprite, 1.0, { frame:30, roundProps: "frame" }, { frame:59, roundProps: "frame" }, {repeat: -1});
          
          } else if ( this.type == "out" ){
            this.animation.fromTo(this.sprite, 1.0, { frame:this.sprite.frame, roundProps: "frame" }, { frame:89, roundProps: "frame" });
          }

 

 

[Cassie]

Hi there! You can't pass additional objects into a tween.

The first object is for the starting values, the second object is for the destination values and any special properties like repeat  duration or ease
 

gsap.fromTo(this.sprite, { 
  frame:30, 
}, { 
  frame:59, 
  roundProps: "frame",
  duration: 1.0,
  repeat: 1
});

Just a note that you're also using old v2 syntax with the duration outside of the vars object, it will work but it's legacy.

 

// correct
gsap.to('elem', { rotation: 90, duration: 1 })

// legacy
gsap.to('elem', 0.1 { rotation: 90 })