Flow Animation Transitions

Using the flow animation transition you can configure how you want the questions to transition from one to another. As ngSurvey uses plain CSS animation features for its transition you can very easily extend it to include your own animations,

You will find below samples of the default transition animations built into ngSurvey. To define what animations should be used for your transitions you will need to set the Questions transition CSS property on your survey properties.

To store newly created CSS transition and being able to use them in your survey you will need to add them to your theme style CSS.

🏃 How it works ?

To handle transitions ngSurvey will add following CSS classes on your survey's questions depending on their current display order. Once the respondent moves to the next or previous question ngSurvey will switch the CSS class and trigger the CSS transition between the classes.

The ngs-survey__flow-section--visible css class will be applied to the currently visible question, the question before will have its css class set to ngs-survey__flow-section--previous and the next question will have its css class set to ngs-survey__flow-section--next.

⌛ CSS Transitions

Out of the box ngSurvey sets following CSS transition properties between the CSS classes switches. If you would like to change the timing or add additional transition properties for your own animations you may customize the CSS class below and add it to your theme style CSS.

.ngs-survey__flow-section {
    transition: transform .5s ease 0s,opacity .4s ease 0s;    
}

🖼️ Vertical (top to bottom) transition

To use this transition you would set the Question CSS property to : vertical

.vertical.ngs-survey__flow-section--visible
{
 opacity:1
}

.vertical.ngs-survey__flow-section--previous
{
 transform:translateY(-50vh) translateZ(0);
 opacity:0
}

.vertical.ngs-survey__flow-section--next
{
 transform:translateY(100vh) translateZ(0);
 opacity:0
}

🖼️ Horizontal (Left to right) transition

To use this transition you would set the Question CSS property to : horizontal

.horizontal.ngs-survey__flow-section--visible
{
 opacity:1
}

.horizontal.ngs-survey__flow-section--previous
{
 transform:translateX(-50vh) translateZ(0);
 opacity:0
}

.horizontal.ngs-survey__flow-section--next
{
 transform:translateX(100vh) translateZ(0);
 opacity:0
}

🖼️ Fade in / out transition

To use this transition you would set the Question CSS property to : fadein

.fadein.ngs-survey__flow-section--visible
{
 opacity:1
}

.fadein.ngs-survey__flow-section--previous
{
 opacity:0
}

.fadein.ngs-survey__flow-section--next
{
 opacity:0
}