Add a delay for effect.

			
.pg-page {
    transform: scale(0.9, 0.9);
    transition: all 500ms;
}

.pg-page.pg-active {
    transform: scale(1, 1);
}

			
new Pageable("main", {
    // delay the scroll by 300ms to allow the transition to complete
    delay: 300,
    onBeforeStart: function(data) {
        // remove the active class before scroll starts
        this.pages[data.index].classList.remove("pg-active");
    }
});

Page 2
Page 3
Page 4
Page 5
Page 6
Page 7