From the course: HTMX Essential Training
Join today to access over 24,800 courses taught by industry experts.
Incorporating custom animations - HTMX Tutorial
From the course: HTMX Essential Training
Incorporating custom animations
- [Instructor] Let's make some adjustments here so that we can have slightly cooler animations. Let's see where we're at now. We're going to run node server. We have our content loading as soon as I click that button. Let's make some adjustments though. First we will adjust our server so that instead of returning our content box, we'll say content box animated, and then we'll say, p, "Watch me slide in." All right, so that should work as we expect it to. The other adjustments that we need to make are to our index file here. We have our content box, we have our trigger button. We're going to add a transition, all, 0.3 ease here. Then we're going to add a trigger button hover, and here we'll say background should be 45a049, little darker green, and then we'll transform by translating on the Y axis, negative one pixels. Then let's add a new class called animated. We referenced that on the server, but we want to change the opacity to zero. We want to change transform, we'll say translate…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.