Javascript to create random radial gradient

I am new to Saola Animate and Javascript.

  1. If I add an external Javascript file to Saola, does it show errors?

  2. I am trying to create a circle filled with white on one color stop and a random color for the second color stop to create a radial gradient effect.

This is what I have so far:

 document.addEventListener('DOMContentLoaded', function() {

      function gumb() {
          var gumball =  document.getElementById("ball");

    function newGradient() {
         var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16);
           return randomColor1;

    // Create gradient
    // (x0,y0,r0 (starting circle),x1,y1, r1(ending circle))
    var grd = gumball.createRadialGradient(100,65,5,100,65,50);

   // Fill with gradient


I would appreciate any suggestions.

Saola Animate version: 3.1.1

Ventura 13.0.1


Please see this sample project.
random gradient.saolapack (2.1 KB)

You can find the script in the Scene Activate event.


1 Like


Thank you so much for your help. I really appreciate it.

Just curious with the same file ToanLS provided. How do you create the same effect using an external JavaScript file?
I tried doing it but, the javascript is not working. This is what I have: (7.2 KB)
I think the problem is that the function needs to be called.
I would appreciate any suggestions.


Your external JavaScript file just defines the function (onSceneActivated(doc, e)).
You need to call that function when the scene is activated.
To call that function, add a Run JavaScript action to the scene activate event:

function sceneEventHandler(doc, e) {
	onSceneActivated(doc, e);


1 Like

Thank you so much, I really appreciate your help.