CSS Animations in Retool Mobile

💬 App Building
,
1
  1. My goal: Fancy Animations in HTML Components
  2. Issue: no animation seems to work. Small Example of Code:
.animated-box { width: 100px; height: 100px; background-color: #3498db; border-radius: 10px; animation: moveBox 2s infinite ease-in-out; } @keyframes moveBox { 0% { transform: translateX(0); } 50% { transform: translateX(150px); } 100% { transform: translateX(0); } }

//ChatGPT generated for testing
3) Steps I've taken to troubleshoot: try and error :smiley:
4) Additional info: (Cloud or Self-hosted, Screenshots) free Version

2

This is the correct example Code:

.animated-box { width: 100px; height: 100px; background-color: #3498db; border-radius: 10px; animation: moveBox 2s infinite ease-in-out; } @keyframes moveBox { 0% { transform: translateX(0); } 50% { transform: translateX(150px); } 100% { transform: translateX(0); } }
3

Hello @Philipp_Kraut ,

In Retool Mobile, the HTML component is really for static rendering (like formatted text, images, SVGs), not for live animations.

  • The workaround is to avoid using @keyframes. Instead of use a GIF. I ran into the same issue while working on an animated loader in the HTML Component and resolved it by switching to a GIF.

Here’s a sample code snippet:

<img src="https://i.gifer.com/ZZ5H.gif" style="width: 40px; height: 40px;" />
2 Likes