Hi @Tony Nguyen ,

a few initial remarks, haven't looked at your code yet :

• there is a warning on your css (orange border) what is it, can it be related ?
• timing : you are doing some getElementById at the top of that script, but there is no guarantee that those elements are already in the DOM at the time the script gets loaded.

My advice would be to first put the code you are not sure about / unfamiliar with in an action to be triggered by a button, and once you are satisfied it works, work on the timing.

If you need more help, please share an oml.

Dorine

PS : to help yourself understand what's going on, add a console.log of each variable you are setting, right after setting it, that will also help you see if they are set properly.  In your example, it will probably show a lot of undefined's.

Hi Tony,

As Dorine already pointed out, one of the main reasons the script didn't work as expected is that the referenced elements in the JS code were not rendered in the DOM at the moment of execution.

To make it work, I have made a few code changes as mentioned below: 

Code Changes:

• Load the JS script file in the screen's OnReady event handler flow using RequireScript client action.
• Use the container widget, which is a <div> element, instead of using an HTML element. 
• Reference the element using a class selector instead of a hardcoded ID value, as the element's ID value is defined at runtime.
• Made few code changes in the JS script file.

Demo app: Animation_POC

Refer to the attached OML file with the code changes.

I hope this is helpful to you!

Kind regards,

Benjith Sam