# Saola Animate: Working with Lightbox **URL:** \ **Category:** Support Questions\ **Created:** [March 12, 2023, 7:27am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251 "2023-03-12T07:27:55Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 12, 2023, 7:27am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/1 "2023-03-12T07:27:55Z")
2 Problems: **The first problem:** My gumball shows a random radial gradient color when I test gumball.html on the browser, which is what I want. However when I test my aslides.html on the browser, the random radial gradient is not working. It is suppose to show a random radial gradient. If you open: (1) aslides.html, 2) select thumbnail, 3) the lightbox opens with the animation, but the random radial gradient color is not showing up. I uploaded my file (lightboxTest) **The second problem:** I want the random color to change every time it loops. The first time the animation plays, the color changes twice. I keep changing the milliseconds, but it is not working. I uploaded my file (LoopTest). I would appreciate any suggestions. Saola Animate version: 3.1.1 OS: Ventura 13.0.1 [LoopTest.zip](https://talk.atomisystems.com/uploads/short-url/mujqqwPDPjtkYfK3SEij1z062oe.zip) (1.6 MB) [lightboxTest.zip](https://talk.atomisystems.com/uploads/short-url/8fmFPg645dUBBNvCXjFe7ySpa0k.zip) (1.8 MB) ---
**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\ **Post date:** [March 13, 2023, 3:13am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/2 "2023-03-13T03:13:47Z")
Hi, Please find my anwsers below: - The first problem: You use an old version of your gumball in aslides.html. In this old version, the script in onSceneActivated.js file doesn’t use a `setInterval` function to fill the gumball randomly after each 2 seconds as in your new version (the LoopTest project), so it just works once when loading the page. - The second problem: Calling `setInterval` in an external JavaScript file (onSceneActivated.js) doesn’t sync with the timeline so this issue occurs. To make them sync together, you should define only the function to fill the gumball in the external JavaScript file, and call this function in a trigger at the start of the timeline. The Scene Activate event handler should also be removed, too. Please find the sample fixed: [gumball\_loop.saolapack](https://talk.atomisystems.com/uploads/short-url/q2MsGHRN8eX567vTR3MCo5ShXOF.saolapack) (473.1 KB) Regards ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 14, 2023, 3:07am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/3 "2023-03-14T03:07:42Z")
Hi ToanLS Thank you for your help. I really appreciate it. I was trying different javascript codes and I forgot to update the old version. Last question, is there a way to scale the images without creating an animation? For example: I want to overall decrease the image size so that it is the same size in the first and last frame. ---
**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\ **Post date:** [March 14, 2023, 3:24am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/4 "2023-03-14T03:24:25Z")
Hi, Do you want to scale the entire animation? If so, you should use `px` unit for the scene width/height in **Properties** pane, and select **AutoFit** option in **Document** pane. Regards ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 14, 2023, 3:47am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/5 "2023-03-14T03:47:35Z")
Thank you again!! That’s exactly what I wanted to know. I realized when I open my lightbox, the random color gradient does not show until after the first loop. However, if I test the html on the browser, it works. Also, it is strange that I click on responsive layout and when I increase the size of the browser, the image does not scale up/down. I uploaded the updated file. [lightboxSample.zip](https://talk.atomisystems.com/uploads/short-url/fm7baaDcsZFQVl2gp1OcOhfpkRb.zip) (1.2 MB) ---
**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\ **Post date:** [March 14, 2023, 7:42am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/7 "2023-03-14T07:42:47Z")
Hi, > [@user2651](#): > > I realized when I open my lightbox, the random color gradient does not show until after the first loop. However, if I test the html on the browser, it works. Maybe it’s not possible to change the gradient color of a hidden element in an iframe (lightbox). You should change it when the ball is already visibile. To do that, drag the timeline trigger at 0 to a new timestamp after the Display On keyframe of the ball, e.g. to 3.370s > [@user2651](#): > > Also, it is strange that I click on responsive layout and when I increase the size of the browser, the image does not scale up/down. The project was created with responsive layouts but the content was not designed properly for these layouts. However, you don’t need responsive layouts in this case, you can delete them all and use AutoFit for fixed scene size (with px unit) as mentioned in my previous answer. Regards ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 15, 2023, 3:00am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/9 "2023-03-15T03:00:28Z")
@ToanLS Thank you for your help, I really appreciate it. It now works. Before I tried your suggestion, I made the ball visible on 0. However, that did not work. However, when I moved the timeline trigger after the first keyframe of the ball, the color gradient works in the lightbox. So maybe, the ball’s keyframe is the factor. [lightboxSampleUpdate.zip](https://talk.atomisystems.com/uploads/short-url/vW36P49rouniTUwXUBwN3tfrj1R.zip) (1.2 MB) ---
**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\ **Post date:** [March 15, 2023, 3:23am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/10 "2023-03-15T03:23:49Z")
Hi, I’ve found that the lightbox resizes itself when showing. It makes the animation switch to another responsive layout and the ball is filled again with the solid color as setting in the editor. So deleting all responsive layouts will resolve it, moving the trigger is not needed anymore. [gumball\_loop\_no\_responsive\_layout.saolapack](https://talk.atomisystems.com/uploads/short-url/2XJKi2cloy5WP7d1N5N0v6MMN9n.saolapack) (471.5 KB) Regards ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 15, 2023, 5:06am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/11 "2023-03-15T05:06:51Z")
Hi So by resizing to another responsive layout, and with the breakpoints, the javascript does not load fast enough, which is why the ball is a solid color. Is that correct? Since there is a timeline trigger on the first key, should I delete the event handler on the ball (runs javaScript)? ---
**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\ **Post date:** [March 15, 2023, 6:24am UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/12 "2023-03-15T06:24:32Z")
> [@user2651](#): > > So by resizing to another responsive layout, and with the breakpoints, the javascript does not load fast enough, which is why the ball is a solid color. Is that correct? No, the script that fills the ball with a random gradient still run when loading, but after that the layout changes and everything is reset to the new layout. > [@user2651](#): > > Since there is a timeline trigger on the first key, should I delete the event handler on the ball (runs javaScript)? That Run JavaScript action will not run in any case because you didn’t assign a function for it. You can delete it. Regards ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [March 15, 2023, 3:32pm UTC](https://talk.atomisystems.com/t/saola-animate-working-with-lightbox/7251/13 "2023-03-15T15:32:59Z")
@ToanLS Thank you!! Although I am new to Saola Animate, you taught me a lot and I really appreciate it.