animating progress bar in gsap

Question

I am new to the Greenock platform and I am trying to animate a progress bar. here is the link https://codepen.io/sriramhegdeofficial/pen/YzyGEeJ

Here is the code: HTML

<div class="slider">
  <div class="ball"></div>
</div>

css

body {
  box-sizing: border-box;
  background: #F7F7F7;
}

.slider {
  width: 300px;
  height: 30px;
  margin: 100px;
  background: rgba(0,0,0,0.1);
  border-radius: 50px;
  border: 1px solid black;
  position: relative;
  padding: 0px 2px;
}
.ball {
  width: 26px;
  height: 26px;
 border-radius: 50px; 
  background: black;
  position: absolute;
  transform-origin: 50% 50%;
  top: 2px;


}

js

gsap.timeline()
  .to(".ball", {x: 298-26,duration: 1,ease:Linear.easeNone, repeat: -1})
   .to(".ball", { duration: 0.5, width: "46px"}, 0)
   // .to(".ball", { duration: 0.5, width: "26px", repeat: -1}, 0.5)

There is a circle, in the beginning, I want to increase the width to 46px from 26px original so the ball should have 46px at the middle of animation sequence and should come back to 26px width at the end. plus it should have repeat: -1 to entire sequence and yoyo: true

Answer 1

I got it the trick was to set properties to timeline itself

gsap.timeline({duration: 1, repeat: -1, yoyo: true})
  .to(".ball", {x: 298-26,duration: 1,ease:Linear.easeNone},0)
   .to(".ball", { duration: 0.5, width: "86px"}, 0)
    .to(".ball", { duration: 0.5, width: "26px"}, 0.5)