# Animation looks good on local browser, but not on Website **URL:** \ **Category:** Support Questions\ **Created:** [May 16, 2023, 2:20am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494 "2023-05-16T02:20:20Z")\ **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:** [May 16, 2023, 2:20am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/1 "2023-05-16T02:20:20Z")
Hi MacOS: Ventura 13.0.1 Saola Animate: 3.1.3 I created two HTML 5 files from Saola Animate. If I test them on the local browser, it works and it looks fine. However, when I put them in the lightbox on the website there’s a glitch. **1)** Gumball HTML: On Safari browser Only, you can see the gumball before it reaches the bottom of the gumball machine. I tested it Google Chrome, and Firefox, and that works fine. Safari Screenshot: Problem ![gumball](https://talk.atomisystems.com/uploads/default/original/2X/c/ccff2fba52f1d5b4c9c5421a356bbf562a82e741.jpeg) Chrome and Firefox Screenshot: Looks good ![Chrome_Firefox](https://talk.atomisystems.com/uploads/default/original/2X/f/fb37fa746d837197cd5b32eab979edd7e5f675a0.jpeg) **2** Halloween E Card: I drag the ecard.html on the Safari local browser, it works fine. However, when I open it on the website in the lightbox, the “Happy Halloween” is missing. The ecard’s animation on the website also has a glitch. Website: [http://rebwacause.epizy.com](http://rebwacause.epizy.com) If you click on the thumbnails, the lightbox opens which shows the animation. Attached are my two files: 1. Gumball: [https://drive.google.com/file/d/18CyQR6GJvNX4gTr\_y0uRHN\_R3m22dfff/view?usp=share\_link](https://drive.google.com/file/d/18CyQR6GJvNX4gTr_y0uRHN_R3m22dfff/view?usp=share_link) 2. Ecard: [https://drive.google.com/file/d/18144CpF5QcpC8l36kUJlCdoamB4CXO8e/view?usp=share\_link](https://drive.google.com/file/d/18144CpF5QcpC8l36kUJlCdoamB4CXO8e/view?usp=share_link) I would appreciate any suggestions. Am I missing something? ---
**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\ **Post date:** [May 16, 2023, 4:31am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/2 "2023-05-16T04:31:57Z")
Hi @user2651, Please edit the access right so that we can download your file from Google Drive. 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:** [May 16, 2023, 6:18am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/3 "2023-05-16T06:18:24Z")
Hi @PhuongThuy_Le I think I fixed it. Let me know if you are still having problems downloading it. ---
**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\ **Post date:** [May 16, 2023, 8:02am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/4 "2023-05-16T08:02:15Z")
Hi, Thanks for your cooperation and detailed description. The illustrated images and files help us understand exactly what you are facing. Now, please find my responses to your requests below: **1. Gumball** It works ok from our test. If the issue still persists from your side, you can try selecting the **gm\_1\_1** and **handles** element \> navigate to the **Properties** pane \> **Position & Size** tab \> **Transform** \> set the **Translate Z** value is **1px**. **2. Ecard:** It seems that your HTML5 uploaded on the website doesn’t have enough resources ( **SeatText.png** and **happyHalloween.png** ). That’s why you see the missing. Please check again. Besides, I would like to note that you should edit and reduce the size of the images before uploading the HTML5 to the website. The larger the size of the files, the slower the loading speed. And they may affect other animations in your project as well. You can take a look at the **Resouces** pane and sort by file size to see the images have large sizes. ![image](https://talk.atomisystems.com/uploads/default/original/2X/8/83cdb685d6b162d4b399a2c1575275c1e6df1119.png) Hope that it clarifies. Regards, Thuy ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [May 16, 2023, 11:01pm UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/5 "2023-05-16T23:01:19Z")
Hi @PhuongThuy_Le I really appreciate your help. I did what you suggested. **Gumball:** The ball still shows up on the Safari browser. **ecard:** On the HTML5, I exported the ecard.saola to HTML5. Then I went into the HTML 5 folder, resources folder, I decreased the size of the images in the resources folder. After I uploaded the HTML5 to the website. On the updated website: **Safari:** When I click on the thumbnail on the Safari: I received this message: ![message](https://talk.atomisystems.com/uploads/default/original/2X/8/8eb22467b099ac777f37edf760c8720995ffeaa7.png) After receiving the message, I click Close, and the ecard appears except that the SeatText.png is missing. ![safari](https://talk.atomisystems.com/uploads/default/original/2X/5/50138efe26a1e5a1ca6069f5b8d3c1011a8d41a3.jpeg) **Chrome and Firefox:** Happy Halloween and Seat Text.png is missing. ![ChromeFirefox](https://talk.atomisystems.com/uploads/default/original/2X/2/2da3cd56b8a2d501eaa2407302441d70e78786ef.jpeg) Updated Files: [gumball.zip](https://talk.atomisystems.com/uploads/short-url/aNv18NmRP97Hq5mfG1PCSLsW9pU.zip) (2.6 MB) > **[ecardUpdate.zip](https://drive.google.com/file/d/1KrzzuyDLtndwn1SX4mvokF2bN2-SBns-/view?usp=share_link)** > > Google Drive file. Just curious is there a way to swap out the original images with the new resized images in saola file on the timeline? ---
**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\ **Post date:** [May 17, 2023, 5:56am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/6 "2023-05-17T05:56:57Z")
Hi, Thanks for the information. Here are my responses: > **Gumball:** The ball still shows up on the Safari browser. We checked the project but it ok from our side, like yesterday. We see that you uploaded the missing HTML file to the website. ![image](https://talk.atomisystems.com/uploads/default/original/2X/4/4d803a9761d1d1fe635f49eb6fbd3fa6f24a2ae4.png) So, you need to upload the full files and clear the browser cache to make sure the browser loads new content. Highly recommended that you should upload all the files to a new folder to test, so you don’t have to worry about the old one being cached. > **ecard** : I received this message We see your content be doubled, but not sure what did you do to lead the situation. The best solution now is to export and upload your content again. > Just curious is there a way to swap out the original images with the new resized images in saola file on the timeline? Yes, please do as follows: - Import new resized images to the Resources pane (click the **Import Resources** button or you can drag and drop them from your computer). - Select the original image element on the Canvas \> **Properties** pane \> **Image** \> **Source** \> **From Resources** and select the newly added image you want. That’s it. And after replacing, you can delete the old images from the **Resources** pane to reduce the project file size. Thuy ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [May 17, 2023, 6:12am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/7 "2023-05-17T06:12:41Z")
@PhuongThuy_Le Thank you again, I will try your suggestions. Also I forgot to ask When I click on the bird, it is supposed to show the bird closing its eyes like it is blinking, but it is not. How do I fix that? ---
**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\ **Post date:** [May 17, 2023, 6:46am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/8 "2023-05-17T06:46:07Z")
When clicking on the bird in scene 1, the project advances to the next scene at once. Therefore you cannot see the eye close. To achieve your wish, just change the bird image in scene 2 to the “ **click** ” image in scene 1. ![image](https://talk.atomisystems.com/uploads/default/original/2X/7/7f3fee9aa5a4bea540a7570b6b60ffa115d2a60f.png) Hope that it helps. Thuy ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [May 17, 2023, 5:53pm UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/9 "2023-05-17T17:53:24Z")
Hi @PhuongThuy_Le When I show page source, I cannot find my html5 files: slplayer.js, gumball.js, gumball html. However, the animation works and I checked my website where I upload my files, and the files are there. Safari: Source Page Screenshot : ![pageSource](https://talk.atomisystems.com/uploads/default/original/2X/d/d4092367c6d50fe662a1732134ab026233bb4d0c.png) How do you open the Directory Listing? Thank you for taking the time to help me, I really appreciate it. ---
**Author:** ![user2651](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/u/71e660/32.png) [@user2651](https://talk.atomisystems.com/u/user2651)\ **Post date:** [May 17, 2023, 10:08pm UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/10 "2023-05-17T22:08:34Z")
I swapped out the images for the edited resized images. In the ecard Saola File: On my resources panel: I noticed skull\_1.png, hand\_1.png, and fingers\_1.png. my Resources Panel Screenshot: ![resources](https://talk.atomisystems.com/uploads/default/original/2X/a/a452517a8dd263dfeb8dff408ada11ee413d5c67.jpeg) However, if I open my ecard-res folder, the files are labeled as skull.png, hand.png, and fingers.png. my ecard\_res Folder Screenshot: ![ecard_res_Folder](https://talk.atomisystems.com/uploads/default/original/2X/e/ed6dceb629a6676c750393b563409edb2641459d.jpeg) The rest of the files in the ecard\_res folder match with the files in the resources panel. I was curious, do you know why those 3 do not match up? [ecard.zip](https://talk.atomisystems.com/uploads/short-url/40MylK4ykiipJT0n8yLhlNr8kAN.zip) (2.8 MB) ---
**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\ **Post date:** [May 18, 2023, 4:28am UTC](https://talk.atomisystems.com/t/animation-looks-good-on-local-browser-but-not-on-website/7494/11 "2023-05-18T04:28:32Z")
> How do you open the Directory Listing? When opening the site’s Home page, the sample hasn’t loaded, so it doesn’t show in the **Sources** pane. You need to click on the sample icon to load the sample on the screen, then, you will see the sample’s source in the **Sources** pane. > I was curious, do you know why those 3 do not match up? The resource name that you see in the **Resources** pane will be used when exporting the project to HTML5. While in the project’s resource folder, the app manages the file name. Users don’t need to bother and also don’t manipulate anything with the file in it. BR,