Slick Page Transitions

Ajax Page Transitions with Swup

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

 

src/Controller/SwupController.php

#[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()),
        $page,
        4
    );

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

templates/swup.html.twig

{# initialize the swup controller, then render normal links! #}
<div
    {{ stimulus_controller('symfony/ux-swup/swup') }}
    id="swup"
>

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

    {{ pagerfanta(pager, 'twitter_bootstrap5') }}
</div>
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