Slick Page Transitions
Ajax Page Transitions with Swup
Replace full page refreshes with Ajax-powered, stylized page transitions (an alternative to Turbo).
composer require symfony/ux-swup
// ... use statements hidden - click to show
class SwupController extends AbstractController
{
#[Route('/swup/{page<\d+>}', name: 'app_swup')]
public function __invoke(UxPackageRepository $packageRepository, int $page = 1): Response
{
$package = $packageRepository->find('swup');
$pagerfanta = Pagerfanta::createForCurrentPageWithMaxPerPage(
new ArrayAdapter($packageRepository->findAll()),
$page,
4
);
return $this->render('ux_packages/swup.html.twig', [
'package' => $package,
'pager' => $pagerfanta,
]);
}
}
{% extends 'base.html.twig' %}
{% block body %}
<div {{ stimulus_controller('symfony/ux-swup/swup') }} id="swup" data-turbo="false">
<div class="row">
{% for package in pager %}
{{ include('main/_package_in_list.html.twig') }}
{% endfor %}
</div>
<div class="mt-3">
{{ pagerfanta(pager, 'twitter_bootstrap5') }}
</div>
</div>
{% endblock %}

UX Swup
Ajax-powered page navigation
URL in address bar changes
Customizable transitions
Install It
$ composer require symfony/ux-swup
$ npm install --force
$ npm run watch