Eu tenho uma "caixa" div que desaparece gradualmente usando ".fp-Viewing" como uma âncora para iniciar o efeito de transição quando um usuário rola para a próxima página. O problema é que a página começa a rolar quando a visualização .fp é acionada e rola a caixa fora de vista antes do final da animação.

Como posso atrasar o início da rolagem quando a visualização .fp é acionada até que a caixa tenha feito sua animação em 4s?

.box{
  transition: all 4s ease-out;
  -webkit-transition: all 4s ease-out;
}

.fp-viewing-2 .box{
  opacity: 0;
}