Sorry for the late reply. Work keeps me busy :(
1. The = operator in the if (width = undefined) expression.
That operator is used for assignment, so the above expression is assigning the undefined value to the width variable. I believe you are trying to determine if the width variable has been defined, which it obviously is on the previous line, but anyway you should be using either the == or === comparison operators to do that.
Ah nuts.... that was a typo. Fixed.
2. You're incorrectly assuming that the width variable retains it's value between calls of the function.
Each time you call the function a new instance of the width variable is created, which means that even if point 1 was fixed (and your logic structure fixed) the value of the variable will never exceed 2.
eg. 1 at initialisation and +1 for the else clause.
Ah okay... I sorta found out about this after reading a little... something about variables initialized within functions not being global and only persist within the function itself right? Darn.
3. You need to persist the current width between calls of the function.
There are a number of ways you can do that, including using the value of the widthCSS property itself.
Could you explain why you need to use TwineScript to animate an element with an ID of #progress (you don't make it clear exactly what type of element it is, which could influence then methods that can be used to animate it), and maybe someone can suggest a better way of implementing it.
I'm trying to make a game loop within TwineScript itself. I'm actually trying to revamp my current "bad programming" which involves several <<repeat>> macros running at once once I read more into javascript single-threading and force yielding... but that's a topic for another day.
The "#ProgressBar" element is basically just a white square/rectangle element with 0% width contained within a parent element with a set width to control its width (Edit: I defined the class properties of these in the global twine css stylesheets). After the progress bar hits 100%, the "enemy" creature will execute an action (attack or heal or whatever), and after that, I need to get the width css property of the ProgressBar to restart at 0% again AND execute the width expanding function again.
The main problem I faced is that the rate at which this ProgressBar expands varies depending on other TwineScript variables ($enemy_atkspd, $enemy_slowed etc). So i can't use CSS timed animations (I don't know how to dynamically affect css animation timing properties using TwineScript) and I felt using too many State.active.variables.xxx in javascript to call upon the TwineScript variable library felt clunky.
So I guess TLDR: I'm trying to make the game loop run in TwineScript to minimize clutter / timing issues. #ProgressBar is just a 0% width white rectangle.
P.S. I've heard of the html5 canvas and the use of requestAnimationFrame() to get around single threading problems, but I'm still doing more research on that and how to get it to work within Twine and the context of my game, but I'll leave that for another day, or unless I have no choice.