Slick Page Transitions

Ajax Page Transitions with Swup

Replace full page refreshes with Ajax-powered, stylized page transitions (an alternative to Turbo).



#[Route('/swup/{page<\d+>}', name: 'app_swup')]
public function swup(PackageRepository $packageRepository, int $page = 1): Response
    // pagination links are just an example: swup works with any "a" tags!
    $pagerfanta = Pagerfanta::createForCurrentPageWithMaxPerPage(
        new ArrayAdapter($packageRepository->findAll()),

    return $this->render('ux_packages/swup.html.twig', [
        'pager' => $pagerfanta,


{# initialize the swup controller, then render normal links! #}
    {{ stimulus_controller('symfony/ux-swup/swup') }}

    {% for package in pager %}
        <a href="{{ path(package.route) }}" class="col-12">
            <img src="{{ asset('build/images/'~package.imageFilename) }}">
            <h4>{{ package.humanName }}</h4>
    {% endfor %}

    {{ pagerfanta(pager, 'twitter_bootstrap5') }}
Symfony logo

UX Swup

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

Install It

$ composer require ux symfony/ux-swup
$ npm install --force
$ npm run watch