Animate an element that is not being replaced

[marcoruffelli]

hi,
I would like to animate the Logo of the site which on the homepage is fixed and large in the center of the page (vertically) while on the other pages it is small and aligned with the menu at the top.
The animation would then be about scaling and positioning. I put this element out of main with id "swup" because it doesn't need to be replaced.
Is this kind of animation possible with swup?

[coriidor5]

You could probably use Swup events to call a transition function in JavaScript. That way, when Swup replaces pages, it runs your code (even if the affected elements aren't being replaced). The Swup docs have a list of the events, but here's some example code.

swup.on('contentReplaced', animate); //runs 'animate' every time the content of the page is reloaded.

https://swup.js.org/events

[AugustMiller]

Swup adds and removes a number of classes on the html element that are intended to act as hooks to "cascade" styles anywhere in your document!

For example, you might do something like this:

.logo {
  /* Default positioning styles! */
}

html.is-animating .logo {
  /* Styles to apply whenever a navigation is occurring */
}

html.is-leaving .logo {
  /* Styles applied when a page is being unloaded */
}

You may need to work with these hooks creatively to define the two states for your site (minimized + centered) and ensure the transition only happens under certain circumstances—but the right combination should be available!

Check out the "How it Works" page for more info: https://swup.js.org/getting-started/how-it-works