Change width of element with values of a given array

[petrosmani]

Hello everybody, 

i want to create a fake preloader with a counter and loading line. 
I want the width of my red line to be the same value as my value on currently time of my percent value.
Lets say that my percent element value is 40 so i want that specific time my red-line value to set its width to 40% and so on.
Is this possible? To set the width of an element with specific steps?

See the Pen eYjaGyz by pmakos (@pmakos) on CodePen

[mvaneijgen]

What I would do is create a timeline of your progress bar (you'd done that already). Instead of animating the width of something I gravitate to other properties, because width isn't that performant, in this case animating the scale would do the exact same thing and is better for performance.

 

So right now we have a timeline that animates the line from 0 scale to 1 scale. If we then pause that timeline, so it does nothing on page load, we could tween that timeline to a specific progress point on that timeline (A timeline has a progress from 0 to 1, where 0 equals to nothing has played and 1 the animation has fully played).

 

If we then feed in your number to that progress we could tie the two together. Using the number directly wounding work, because your scale is from 0 to 100 and the progress needs a value between 0 and 1, but just dividing the number by 100 fixes this. 

 

Hope it helps and happy tweening! 

 

See the Pen VwBOrKg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[petrosmani]

Man, once again you 😃
Thank you very much for your time!
The thing i was missing was the progress() method. 

https://greensock.com/docs/v3/GSAP/Timeline/progress()
I was trying to achieve this with rough ease options. Another stupid mistake was that I was searching by keyword "step" and not "progress"