Update content of certain elements without animating them

[Fefedu973]

I have a page with an header but the links inside the header are changing but i want to keep the header fixed and same thing for the background of my website i dont want him to move but it must be insde the

thing so how can i exclude elements ?

[hirasso]

Hi @Fefedu973 ! You can exclude elements from your animation by adding your animation class (.transition-main in the following example) to only the elements you want to animate:

<div id="swup">
  <header>This element won't be animated</header>
  <main class="transition-main">This element will be animated</main>
</div>

Alternatively, to get more fine-grained control over which elements to update on page visits, have a look at the containers option:

<div>
  <header id="header">This element won't be animated</header>
  <main id="main" class="transition-main">This element will be animated</main>
  <div>This element will persist through page visits</div>
</div>

const swup = new Swup({
  containers: ['#main', '#header']
});

[Fefedu973]

Thanks a lot for this clear answer !