JS Plugin: Wait for CSS animations to finish

[kaspost]

Basically, I'm coding an app with swup that primarily consists of transitions done through pure css. However, there are a few cases where some css properties need to be calculated through javascript before they are animated in. To solve this, my approach was to add the swup js plugin and use it like this:

new SwupJsPlugin([ { from: '(.*)', to: '(.*)', in: prepareTransitions, out: prepareTransitions, }, ])

And the prepareTransitions function basically looks like this:

const prepareTransitions = next => { calcAndSetCssProperties(); next(); }

The problem here becomes that swup doesn't wait for the animations to finish when switching between pages. This obviously has to do with the fact that next is invoked instantly after calcAndSetCssProperties. In order to solve this, is there a swup method that I can utilize to wait for all animations to finish and then invoke the next function?

[hirasso]

If using JS Plugin, you'll need to use setTimeout(next, yourTransitionDurationInMilliseconds) to wait for your transitions to finish.

Alternatively, you could hook into swup's lifecycle events directly and alter the styles from there (without using JS Plugin):

const swup = new Swup(options);

/**
 * Sets the style on the main transition element
 */
const adjustStyle = (newStyle = {}) => {
  const el = document.querySelector('.transition-main');
  if (!el) return;
  for( const [property, value] of Object.entries(newStyle)) {
    el.style[property] = value;
  }
}
/**
 * Sets the background to blue for the out-animation
 */
swup.on('transitionStart', () => {
  adjustStyle({
    background: "blue"
  })
})
/**
 * Sets the style for the in-animation
 */
swup.on('contentReplaced', () => {
  // set the background to red initially
  adjustStyle({
    background: "red"
  })
  // Fade the background to white on the next frame
  requestAnimationFrame(() => {
    adjustStyle({
      background: "white"
    })
  })
});

In your CSS, you would then only need to define the transition and initial value:

.transition-main {
  transition: background 400ms;
  background: white;
}

[kaspost]

Tested again with an actual synchronous wait function which proved that swup indeed does wait for the event attached function execution to finish.

const syncWait = ms => {
    const end = Date.now() + ms
    while (Date.now() < end) continue
}

const onTransitionStart = () => {
    syncWait(5000)
    console.log('dom manipulations finished')
}

swup.on('transitionStart', onTransitionStart)

[kaspost]

Awesome, thanks for the help guys!

[hirasso]

You are welcome! And thanks for the syncWait function, never knew that kind of stuff was possible :)

[kaspost]

Yeah, just only use it for testing. Very performance heavy :)

[hirasso]

😄 of course!