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

src/Controller/UxPackage/SwupController.php

// ... use statements hidden - click to show

use App\Service\UxPackageRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;


class SwupController extends AbstractController
{
    private const int PER_PAGE = 4;

    #[Route('/swup/{page<\d+>}', name: 'app_swup')]
    public function __invoke(UxPackageRepository $packageRepository, int $page = 1): Response
    {
        $package = $packageRepository->find('swup');

        $packages = $packageRepository->findAll();
        $pages = ceil(\count($packages) / self::PER_PAGE);
        if ($page < 1 || $page > $pages) {
            throw $this->createNotFoundException('Page not found');
        }
        $results = \array_slice($packages, ($page - 1) * self::PER_PAGE, self::PER_PAGE);

        return $this->render('ux_packages/swup.html.twig', [
            'package' => $package,
            'results' => $results,
            'page' => $page,
            'pages' => $pages,
        ]);
    }
}

templates/ux_packages/swup.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">
    
        <div class="PackageList">
            {% for package in results %}
                {{ include('components/Package/PackageListItem.html.twig', {package}) }}
            {% endfor %}
        </div>
    
        <div class="mt-3">
            <nav class="Pagination">
                {% for num in 1..pages %}
                    <a href="{{ path('app_swup', num > 1 ? {page: num} : {}) }}"
                       aria-current="{{ page == num ? 'true' : 'false' }}">
                        {{ num }}
                    </a>
                {% endfor %}
            </nav>
        </div>
    </div>
{% endblock %}