HTMX - Animations

---

---

Animation makes your website more attractive to the user and helps you to present your product or service in a better form. HTMX is designed to allow developers to use CSS Transitions. CSS Transitions are used to handle animation speed in CSS. This allows you to animate changes in an element's style properties over a specified duration.

You can use View Transitions API to create animations. View Transitions API is capable of creating animated transitions between website views. For a single page, it includes animation between DOM states, and for the multi-page app animating the navigation between documents.

List of Animation in HTMX

Basic CSS Animations

Simple animations like color changes or a progress bar can be considered as a basic CSS animation, here we will see an example of color changes of an element in animation.

CSS Code

.animation {
 transition: all 1s ease-in;
}

HTML Code

<div id="color-change" class="animation" style="color:red" 
 hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
 TutorialsPoint
</div>
<div id="color-change" class="animation" style="color:blue" 
 hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
 TutorialsPoint
</div>

Swap Transitions

Swap transition animations fade in and out of any element. Let's create a fade-out on swap animation. So in this animation, if you want to fade out an element that is going to be removed when the request ends then you have to use the htmx-swapping class with CSS and extend the swapping phase.

CSS Code

.fade-out.htmx-swapping {
 opacity: 0;
 transition: opacity 1s ease-out;
}

HTML Code

<button class="fade-out"
 hx-delete="/fade_out_demo"
 hx-swap="outerHTML swap:1s">
 TutorialsPoint
</button>

Settling Transitions

It allows for smooth visual transitions when content is updated. Let's create a simple demo that showcases this functionality.

CSS Code

#fade-in.htmx-added {
 opacity: 0;
}
#fade-in {
 opacity: 1;
 transition: opacity 1s ease-out;
}

HTML Code

<button id="fade-in"
 class="btn primary"
 hx-post="/fade_in_demo"
 hx-swap="outerHTML settle:1s">
 TutorialsPoint
</button>

Request In Flight Animation

If you apply htmx-request on the element which is triggering a request then an in-flight animation can be achieved. Below is the form element where we will apply this class, so when you submit, it will change and show you submitted.

CSS Code

form.htmx-request {
 opacity: .5;
 transition: opacity 300ms linear;
}

<form hx-post="/name" hx-swap="outerHTML">
<label>Name:</label><input name="name"><br/>
<button class="btn primary">Submit</button>
</form>