Is there and equivalent of turbo:before-render for turbo-frames

1

I would like to add transitions when a frame changes its content, e.g fade-out the old content and fade-in the new.

For turbo-links that target _top I can use the turbo:before-render event.
This event lets you pause rendering and then resume.

document.addEventListener('turbo:before-render', async (event) => {
  event.preventDefault()

  await animateOut()

  event.detail.resume()
})

As per the handbook

I could do it on the turbo:frame-render event, but without the resume, I would have to handle the injection of HTML into the frame manually.

Are there any events that Iā€™m unaware of?

1 Like