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
use App\Service\UxPackageRepository;
use Pagerfanta\Adapter\ArrayAdapter;
use Pagerfanta\Pagerfanta;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

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 data-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 %}
Symfony logo

UX Swup

Ajax-powered page navigation
URL in address bar changes
Customizable transitions

Install It

$ composer require symfony/ux-swup