How to improve UI with animations?

Ask for Help
1

Hey,

I am getting many reviews that my app needs more animations, especially for it’s AI components. I looked at lottie and there are some nice animations available, but the “Web Embed” option is way too big.

Any ideas on how to incorporate these animations in my app? Anything that would make the app more “high-tech” is welcome tbh.

Here’s the animation I’m thinking about:

Animation - 1752096280528

Would love it if it could be something small that could be put in front of a text or sth, similar to the way the icon in the “Hint” component works!

1 Like
3

CleanShot 2025-07-10 at 07.47.09
CleanShot 2025-07-10 at 07.47.091395×470 63.2 KB

It can be a rich text component, taking your GIF URL here for example.

<div style="display: flex; align-items: center; background: #f7f7f9; border-radius: 18px; padding: 28px 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);">

  <img src="https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85c28bf96138a04a58cae889d3edb29ae07652ae.gif" style="width: 140px; height: 140px; object-fit: cover; margin-right: 28px;">

  <div style="text-align: left;">

    <h3 style="margin: 0 0 14px 0;">Title Goes Here</h3>

    <div style="font-size: 0.95rem; color: #888;">Subtitle goes here</div>

  </div>

</div>
2 Likes
4

Wow! Looks really cool! I’ll be using these for my AI answers.

Thanks!

1 Like
5

For some reason, it doesn’t seem to work when using the template computed column instead of just pasting it in rich text. Any idea as to why and workarounds?

1 Like
6

If you’re writing HTML in a template column and displaying it through a Rich Text component, it’s a good idea to keep things tightly formatted — avoiding leading spaces and extra blank lines.

These components seem to use a mix of Markdown-like parsing and HTML sanitization, which means:

  • Lines starting with spaces or tabs can sometimes be treated as preformatted blocks (like <code> or <pre>), not actual HTML.
  • Valid tags like <div> or <h3> may show up as plain text if indented.
  • Extra vertical whitespace (empty lines) might lead to unexpected layout or spacing behavior.

Best practice: Keep your HTML left-aligned and minimal — no leading indentation, and avoid unnecessary line breaks.

2 Likes
7

I just got CSS transitions working really easily as a test, got ChatGPT to spin up this:

.zoom-fade {
opacity: 0;
transform: scale(0.8);
animation: zoomFade 0.8s ease forwards;
}

@keyframes zoomFade {
to {
opacity: 1;
transform: scale(1);
}
}

1 Like