Thanks a lot for detailed post, one thing I would suggest is that how many features are there, have complete and proper documentation of them and wherever needed throw in a short tut,
Documentation has to b made keeping a begginer in mind not experienced users,but if your main target is experienced user , that then justifies your current documentation.
Using PlayC right now it feels its not a begginer friendly and prerequisite has to b some other engine preferably Unity
Okay coming back to question ,It worked and good to go now how to update keyframe in code ??
provide me a simpler version please ,the example from october 2020 is too complex for me to understand
Honestly, that is about as simple as it gets to animate the UI element via code. It sets an animation speed (frames per second) and changes the frame index to match the animation speed.
Thanks but A “simple coding example” would solve everything!
In the old example of October 2020 that is almost unusable
Also
I decided to make another look manual by going through Ui in manual (haha)
The sprite and other important parts was just left on user imagination 
,haha I mean why would you do that .Yeah I know you guys dont have time but that would not require more than a day to complete it
Just go through this page Image Elements | Learn PlayCanvas
and tell me why this part was never discussed
I am sure I missed it but I couldnt find it anywhere
Sprite Editor is covered by 2D | Learn PlayCanvas
The connection between UI and Sprites is not though. Like I said, there’s holes in the documentation where updated features haven’t been added or even connection between certain features.
Honestly, if we did have that, we would do it. We are pretty much flat out here focusing on features in the Engine and Editor that makes it really difficult to switch gears to pure document writing.
Good tutorials and documentation take time to do right. For example, this took around 3 days to do in terms of planning, producing and reviewing: Importing your first Model and Animation | Learn PlayCanvas
Lets hope its more proper in future ,I feel what is need of feature if there is no way told how to use it .
anyway back to question help me with few more steps regarding scripting of animating frame so this thread can solved
I got help from chatGPT and it said
var spriteComponent = this.entity.getComponent("sprite");
var currentFrame = 0;
this.entity.on("click", function () {
currentFrame = (currentFrame + 1) % spriteComponent.sprite.frames.length;
spriteComponent.frame = currentFrame;
});
Unfortunately chatGPT is wrong 
I’ve found ChatGPT to be better at explaining existing code. I would try pasting the code from the other thread and ask it to explain it
Great I would wait
Also you mentioned earlier the code is pretty straight forward for This,y dont just post the basic syntax
Instead of copy pasting 3 year old buggy code , and asking GPT to make sense out of it,doesn’t make sense
The code in the 2020 thread still works as is. I tested it earlier today and required no code changes.
Edit: Here’s a video using the code from the thread
Thanks a lot for helppppp throughout, everything worked out correctly here is explanation of script by chatGPT
This script is a PlayCanvas script used to animate a UI sprite element. It animates the sprite by changing its frame over time, effectively simulating a rotation. The animation is controlled by a number of attributes and methods, which are explained below:
*** fps: The number of frames per second that the animation should play at. The default value is 15.**
*** delay: The number of seconds to wait before starting the animation. The default value is 0.**
*** loop: A boolean value indicating whether the animation should loop or not. The default value is true.**
*** initialize: This method is called when the script is initialized and sets up the animation. It calculates the interval between frames based on the fps value and calls the restart method to start the animation.**
*** update: This method is called every frame and updates the animation. It increments the current frame based on the elapsed time and the fps value, and checks whether the animation has reached its end. If the loop attribute is set to true, the animation restarts from the beginning, otherwise, it stops.**
*** restart: This method restarts the animation from the first frame. It sets the spriteFrame property of the UI element to 0, initializes the timer to minus the delay value, and sets the _isComplete flag to false.**
*** var UiRotate = pc.createScript('uiRotate');: This line creates a new script in PlayCanvas and assigns it to the variable UiRotate. pc.createScript is a PlayCanvas method that creates a new script with the specified name. In this case, the name of the script is uiRotate.**
*** UiRotate.attributes.add('fps', {type: 'number', default: 15});: This line adds an attribute called fps to the script and sets its type to number. The default value is set to 15, which means that if the attribute value is not specified, the default value of 15 will be used.**
*** UiRotate.prototype.initialize = function() {...}: This line defines a method called initialize on the UiRotate prototype. The method will be called when the script is initialized and sets up the animation.**
*** this._frameCount = this.entity.element.sprite.frameKeys.length;: This line assigns the number of frames in the sprite animation to the _frameCount property. frameKeys is a property that contains the list of frame keys for the sprite. length is a property that returns the number of elements in the list.**
*** this._timer += dt;: This line increments the value of the _timer property by the delta time dt. Delta time is the time elapsed since the last frame, and is used to control the animation timing.**
*** if (this._timer > this._interval) {...}: This line checks if the _timer is greater than the interval between frames. If it is, it means that it’s time to move to the next frame.**
*** this.entity.element.spriteFrame = nextFrame;: This line sets the spriteFrame property of the UI element to the next frame in the animation.**
*** this._timer -= this._interval;: This line subtracts the interval from the _timer property to keep track of the elapsed time.**
I made a complete tutorial on
Animated UI in playcanvas
Little effort to contribute to this community