# htmx and Astro View Transitions

> Learn how to make htmx work with Astro View Transitions by calling htmx.process() after a page swap so your htmx events keep firing on astro:after-swap.

Author: Flavio Copes | Published: 2023-10-30 | Canonical: https://flaviocopes.com/htmx-and-astro-view-transitions/

When using both htmx and [Astro](https://flaviocopes.com/astro-introduction/) View Transitions, I had an event that fired on page load, so I added a `astro:after-swap` event to handle doing the same thing I did after page load, but after a page transition:

```javascript
<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    triggerFetchLastUpdated()
  })
</script>
```

But, I hit a problem: I noticed my HTMX event didn’t fire after a transition.

Solution: make sure you call `htmx.process()` after a page swap.

During the `astro:after-swap` event:

```javascript
<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    htmx.process(document.body)
    triggerFetchLastUpdated()
  })
</script>
```

You could also just have one event `astro:page-load` and skip handling 2 different events (`htmx.onLoad` and `astro:after-swap`):

```javascript
<script>
 document.addEventListener('astro:page-load', () => {
   const contentElement = document.getElementById('fetch-last-updated')
   if (contentElement) {
      htmx.process(document.body)
      htmx.trigger(contentElement, 'click', {})
    }
  })
</script>
```

…but that’s slower as fires at the end of page navigation. `astro:after-swap` instead fires immediately after the new page replaces the old page.