HTMX and the View Transitions API

In this view, we'll look at the new View Transitions Web API - which can be used to smoothly transition between two states in the DOM.
We'll see how this API is easily integrated into HTMX, and how to define custom animations/transitions when going from one state to another.
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/po...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
HTMX Swapping: htmx.org/docs/...
HTMX View Transitions Essay: htmx.org/essay...
#django #htmx

[@AliHassan-wc6nb]

I always make sure to like the videos and save them to watch later if I don't watch them right away.

[@bugbytes3923]

Thanks a lot!

[@JT-mr3db]

One thing to note is that if you have content you are transitioning that is sandwiched in between other elements, the difference in height between the transitioning elements will snap in to place after the transition. You can see this effect in the htmx transition example docs where the content goes from visible to not visible and there are paragraphs in between. I suspect this is because height animations are cpu bound rather than gpu optimized like the view transitions. For simple transitions this is not going to stop anyone clicking "Purchase". You can always use a framework for any bits of UI that requires a more controlled approach.

[@tobidegnon4409]

I saw the title and instantly loved it. You keep up to date with trends to bring us great content, thanks so much. I saw the view transition api mention a few weeks ago with the latest release of astro, and was wondering how would that work with htmx and now I have the answer, thanks again.

[@bugbytes3923]

Thanks a lot Tobi! How is Astro? Never used it yet.

[@tobidegnon4409]

@@bugbytes3923 I haven't tried it, I've just been keeping an eye on it. For me, the most interesting use case is the creation of mostly static sites.

[@user-xu7jz4li7e]

Going to save some time this weekend to watch the video. Thanks!

[@bugbytes3923]

Thank!

[@Noritoshi-r8m]

What an amazing combination. My favorite transition is the 'elastic', i don't know if it is a native thing in plain css, i tried it in Svelte Transitions libary and it was a great result, specifically for the menu drawer after we click the hamburger icon.

[@bugbytes3923]

Nice! I’ll need to check that one out.

[@iflux8821]

Nice one! Thanks! Getting good old railscasts vibes from watching your content! Could you please consider using dark mode or darker default css for the web page so that it’s easier on eyes? Thank you!

[@bugbytes3923]

Thanks a lot - I'm not familiar with Railscasts, but thanks! And good suggestion - I hadn't considered that.

[@AmoahDevLabs]

Great gist as you always do. Keep it up man.

[@bugbytes3923]

Thanks dude, I appreciate the support!

[@oSpam]

Great vid, these are all helpful but I forget the day later lol. It’s in my watch later though so as soon as I need it I know where to find it

[@bugbytes3923]

Yeah, I make the videos to help me learn and remember sometimes 😁 Thanks for watching!

[@seydinaoumarsamabaly1806]

Very useful Tutorial ! Thank you mate !

[@bugbytes3923]

Thanks mate!

[@dentonholmgren4886]

Thanks for a great tutorial

[@bugbytes3923]

Thanks a lot!

[@MagnusAnand]

Cool video!!

[@bugbytes3923]

Thanks a lot!

[@themarksmith]

Excellent video!

[@bugbytes3923]

Thanks!

[@sebwylleman]

Top content, glad I found your channel, keep them coming!

[@bugbytes3923]

Thanks a lot!

[@kai.diefenbach]

Yet another great video! Thanks!

[@bugbytes3923]

Thanks a lot!

[@nextnoir]

Hi, thank you for the great tutorial! I have a question if you don't mind. How do I realize transitions for several elements on one page? For example a todo list and I want to apply transition effect to each todo (adding, editing, deleting)? If add "sample-transition" to each todo then there is an error "Unexpected duplicate view-transition-name: slide-it"

[@CristianMolina]

Loved it, thx

[@bugbytes3923]

Awesome, thanks for watching!

[@weyrdereveryday3478]

Thanx for this intro

[@bugbytes3923]

Thanks for watching!

[@EmptyNonsens]

I would love to see it in a full project

[@bugbytes3923]

True, good point!

[@repotranstech9614]

thanks for this informative video

[@bugbytes3923]

Thanks for watching!

[@ib4112]

Does this work on Firefox and Safari?

[@ezraklitsie9253]

thank you sir

[@bugbytes3923]

Thanks for watching!

[@frameff9073]

good thank

[@bugbytes3923]

Thanks for the comment!

[@ItsMe-vo1du]

I have a counter with 2 buttons, one to increase item and one to decrease from the db, each one has a view , how can I press the buttons to update the values, it upadates in db but in the html content does not until I refresh the page

[@ItsMe-vo1du]

Is there's a tutorial for that ?

[@Septumsempra8818]

Without code I can't help. What's your network message in your browser dev toolbar? Is it returning html when you click the button? If yes then your HTMX code is buggy. If no, then your view isn't returning a response when given a request.

[@ItsMe-vo1du]

@@Septumsempra8818 cart app view: def add_item_quantity(request, order_number): cart_item_quantity = Cart.objects.get(order_number=order_number) cart_item_quantity.item_quantity += 1 cart_item_quantity.product_price + cart_item_quantity.product_price cart_item_quantity.save() context = { 'cart_item_quantity': cart_item_quantity, } render(request, 'Components/ProductToBuy.html' ,context) def remove_item_quantity(request, order_number): cart_item_quantity = Cart.objects.get(order_number=order_number) if cart_item_quantity.item_quantity > 1: cart_item_quantity.item_quantity -= 1 cart_item_quantity.product_price - cart_item_quantity.product_price cart_item_quantity.save() context = { 'cart_item_quantity': cart_item_quantity, } return render(request, 'Components/ProductToBuy.html' ,context) cart app : Product/Components/ProductToBuy.html: {% for cart_item in cart_items %} {{ cart_item.size }} {{ cart_item.product_name }} {{ cart_item.product_brand }} $ {{ cart_item.product_price }} {{ cart_item.item_quantity }} {% endfor %} cart app model: class Cart(models.Model): # user = models.ForeignKey(User, on_delete=models.CASCADE) product_name = models.CharField(max_length=255) product_brand = models.CharField(max_length=100) image_field = models.ImageField(upload_to='cart_images/') size = models.CharField(max_length=10) color = models.CharField(max_length=10) product_price = models.DecimalField(max_digits=10, decimal_places=2) item_quantity = models.PositiveIntegerField(default=1) order_number = models.IntegerField(unique=True) # No default random number here def __str__(self): return self.product_name

[@ItsMe-vo1du]

it update in db , but the content in the templates does not

[@oSpam]

@@ItsMe-vo1duyou’ll need a swap out of bands div that replaces the counter. Do you have discord or any other form or contact? I’m free to help if you’d like

[@Septumsempra8818]

Does this work on scroll? When I'm scrolled down the page, i get both the scroll and the transition. Feels disorienting.

[@bugbytes3923]

I don't think this works on scroll, no. Not tested that though!

[@Septumsempra8818]

@bugbytes3923 HTMX has a problem once pages need scroll. I've sorta fixed it with 'htmx.config.scrollBehaviour = "instant"' in a script tag in base.html this prevents the page from scrolling up to top of new page after settling the request, but doesn't allow a smooth view transition. "hx-swap show:windop:top" is supposed to prevent all thins from happening but it still scrolls. I don't know if it's a me-bug or an htmx problem.

[@catalinim4227]

Sorry mate, but this isn't a page transition, You stayed on the same page. It's a content swap.

[@Septumsempra8818]

🇿🇦🇿🇦🇿🇦🇿🇦

[@deidyomega]

I kinda wanna make a joke website using the most stupid page transitions now. Just go ham with it

[@smyrnian_]

This marks the official death of SPA apps :)

[@DhavalAhir10]

Fastapi Tutorials.