Animation hooks

The hooks around the animate-out and animate-in phases, and how to skip or replace the wait.

An animated visit runs these six hooks. They are highlighted below, in the context of the whole visit, so you can see where each one sits, what Pagefold waits for, and which classes are on the html element at each moment.

The visit, step by step

1

Start

The old page is on screen.
1. visit:start
  
  The visit exists. This is the moment to change it: its animation name, or whether it animates at all.
  
  html no classes
2. page:load
  
  The page starts loading, from the cache or from the network. It runs alongside the animation.
  
  html no classes
2

Animate out

The old page is still on screen, animating out.
1. animation:out:start
  
  Pagefold adds the state classes. Your CSS starts animating the old content out.
  
  html is-changingis-animatingis-leaving
2. animation:out:await waits
  
  Pagefold waits for the CSS transitions to end. The JS plugin replaces this step with your own animation.
  
  html is-changingis-animatingis-leaving
3. animation:out:end
  
  The old content is out. Nothing happens here by default.
  
  html is-changingis-animatingis-leaving
3

Swap

The new content takes the place of the old one, hidden by the animation.
1. content:replace
  
  The containers are swapped and the title updates. The new content starts hidden, because is-animating is still on.
  
  html is-changingis-animatingis-rendering is-leaving
2. content:scroll
  
  The scroll position is set: to the top, or to an anchor.
  
  html is-changingis-animatingis-rendering
3. page:view
  
  The new page is in place. This is where analytics page views are sent.
  
  html is-changingis-animatingis-rendering
4

Animate in

The new page animates in.
1. animation:in:start
  
  Pagefold removes is-animating. Your CSS transitions the new content in.
  
  html is-changingis-rendering is-animating
2. animation:in:await waits
  
  Pagefold waits for the CSS transitions to end.
  
  html is-changingis-rendering
3. animation:in:end
  
  The new content is in. Nothing happens here by default.
  
  html is-changingis-rendering
5

End

Back to normal.
1. visit:end
  
  The state classes are removed. The visit is over.
  
  html is-changingis-rendering

Classes in green appear at that step. Struck through, they are removed there. Steps marked waits are where Pagefold holds the visit until the animation is done.

In detail

The first and the fourth hooks set up the state classes; the middle ones are where the waiting happens.

Hook	When	Default
`animation:out:start`	Before the old content animates out	Adds `is-changing`, `is-animating`, `is-leaving` (and `is-popstate`, `to-<name>` if they apply)
`animation:out:await`	While the old content animates out	Waits for CSS transitions and animations
`animation:out:end`	After it finished	none
`animation:in:start`	After the new content is in place	Removes `is-animating`, which starts the transition in
`animation:in:await`	While the new content animates in	Waits for CSS transitions and animations
`animation:in:end`	After it finished	none

Arguments are undefined for start and end, and { skip: boolean } for await.

Skipping the wait

pagefold.hooks.before('animation:out:await', (visit, args) => {
  if (visit.to.url === '/instant') args.skip = true
})

Doing the waiting yourself

Replace the await hooks. This is exactly what the JS plugin does:

pagefold.hooks.replace('animation:out:await', async (visit, { skip }) => {
  if (skip) return
  await myAnimation()
})

`animation:skip`

Fires instead of the six hooks above when a visit is not animated: visit.animation.animate is false (back and forward visits, { animate: false }, reduced motion). Arguments: none.

Not animated, still replaced

Skipping animation does not skip the content swap: content:replace, content:scroll and page:view still run.