Vertical Up and Down Animation Between Div Sections R Shiny

Question

In trying to create a vertical stepper with ShinyJS and ShinyAnimate it looks like the animations get mixed up - wherein up is in down and out up is out down.

This might be able to be solved with just ShinyJS as there is an animation argument but it is unclear if there is an up/down slide or just a "slide".

Initial question

How to use a vertical layout stepper within R Shiny?

library(shiny)
library(shinyanimate)
library(shinyjs)
# UI
ui <- fluidPage(
    useShinyjs(),
    withAnim(),
    
    ######## PART 1
    div(id = 'part1',
        fluidRow(h1("Page 1")),
        fluidRow(
            column(6,
                   h3("SECTION 1")
            ),
            column(6,
                   h3("SECTION 2")
            )
        ),    
        actionButton(inputId = "ForwardTo2", 
                           label = "To 2")
        
        ),
    
    ######## PART 2
    shinyjs::hidden(div(id = 'part2',
                        fluidRow(actionButton(inputId = "BackTo1", 
                                     label = "Back to 1")),
                        fluidRow(h1("Page 2")),
                        fluidRow(
                            column(6, 
                                   h3("SECTION 1")
                                   ),
                            column(6,
                                   h3("SECTION 2")
                                   )
        ),
        actionButton(inputId = "ForwardTo3", 
                     label = "To 3")
        
    )),
    
    ######## PART 3
    shinyjs::hidden(div(id = 'part3',
                        fluidRow(actionButton(inputId = "BackTo2", 
                                              label = "Back to 2")),
                        fluidRow(h1("Page 3")),
                        fluidRow(
                            column(6,
                                  h3("SECTION 1")
                                  ),
                            column(6,
                                   h3("SECTION 2")
                                   )
                        ),
                        actionButton(inputId = "ForwardTo4", 
                                     label = "To 4")
                        
    )),
    

)

# Server
server <- function(input, output, session) {

    # Forward 1 To 2
        observeEvent(input$ForwardTo2,{
            startAnim(session, 'part1', 'slideOutUp')
            toggle('part1')
            startAnim(session, 'part2', 'slideInUp')
            toggle('part2')
        })
    
    # Backward 2 To 1
        observeEvent(input$BackTo1,{
            startAnim(session, 'part2', 'slideOutDown')
            toggle('part2')
            startAnim(session, 'part1', 'slideInDown')
            toggle('part1')
        })
    
    # Forward 2 To 3 
        observeEvent(input$ForwardTo3,{
            startAnim(session, 'part2', 'slideOutUp')
            toggle('part2')
            startAnim(session, 'part3', 'slideInUp')
            toggle('part3')
        })
    
    # Backward 3 To 2
        observeEvent(input$BackTo2,{
            startAnim(session, 'part3', 'slideOutDown')
            toggle('part3')
            startAnim(session, 'part2', 'slideInDown')
            toggle('part2')
        })
    
}

# Run
shinyApp(ui = ui, server = server)