Property changed transition effect with html {{!! $html !!}

[egyjs]

I'm trying to make a transition effect to text in livewire & laravel

It is working with {{ $html }}:

<p class="text-gray-600"  x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ $slide['current']['id'] }}c">{{ '<h1>hi</h1>' }}</p>

but it didn't work with {!! $html !!}}:

<p class="text-gray-600"  x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ $slide['current']['id'] }}c">{!! '<h1>hi</h1>' !!}</p>

[KevinBatdorf]

You can't put an <h1> inside a <p> element. The browser will move it out.

[egyjs]

thank you @KevinBatdorf