View one section at a time in a truly creative way, animating with more than 50 different effects.
![Section Transitions 2 section transitions 1](https://e-addons.com/wp-content/uploads/2021/04/section_transitions_1.png)
Sections
Define which sections you want to transition:
- The item label
- The #ID target of section or element (view *)
The viewport height allows you to define the viewing area which can be independent from the section.
Align content vertically or horizontally.
![Section Transitions 3 section transitions 2](https://e-addons.com/wp-content/uploads/2021/04/section_transitions_2.png)
Transitions
- Move to left/ from right
- Move to right/ from left
- Move to top/ from bottom
- Move to bottom/ from top
- Fade / from right
- Fade / from left
- Fade / from bottom
- Fade / from top
- Fade left / Fade right
- Fade right / Fade left
- Fade top / Fade bottom
- Fade bottom / Fade top
- Different easing
- Different easing / from right
- Different easing / from left
- Different easing / from bottom
- Different easing / from top
- Scale down / from right
- Scale down / from left
- Scale down / from bottom
- Scale down / from top
- Scale down / scale down
- Scale up / scale up
- Move to left / scale up
- Move to right / scale up
- Move to top / scale up
- Move to bottom / scale up
- Scale down / scale up
- Glue left / from right
- Glue right / from left
- Glue bottom / from top
- Glue top / from bottom
- Flip right
- Flip left
- Flip top
- Flip bottom
- Fall
- Newspaper
- Push / Pull
- Push left / from right
- Push right / from left
- Push top / from bottom
- Push bottom / from top
- Push left / pull right
- Push right / pull left
- Push top / pull bottom
- Push bottom / pull top
- Fold left / from right
- Fold right / from left
- Fold top / from bottom
- Fold bottom / from top
- Move to right / unfold left
- Move to left / unfold right
- Move to bottom / unfold top
- Move to top / unfold bottom
- Room to left
- Room to right
- Room to top
- Room to bottom
- Cube to left
- Cube to right
- Cube to top
- Cube to bottom
- Carousel to left
- Carousel to right
- Carousel to top
- Carousel to bottom
- Sides
- Slide
* Get the ID in any element
![Section Transitions 4 copypaste element id 1](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_1.png)
Right click
![Section Transitions 5 copypaste element id 2](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_2.png)
Copy ID
![Section Transitions 6 copypaste element id 3](https://e-addons.com/wp-content/uploads/2020/07/copypaste-element-id_3.png)
Paste in the field
Navigation
There are several ways to scroll through the sections
![Section Transitions 7 section transitions arrows](https://e-addons.com/wp-content/uploads/2021/04/section_transitions_arrows.png)
Arrows
Navigation based on ARROWS that allow you to switch between sections, configure position, style and colors:
- Stroke width
- Size
- Shift
Animation on rollover
![Section Transitions 8 section transitions interactions](https://e-addons.com/wp-content/uploads/2021/04/section_transitions_interactions.png)
Interactions
Interact with the element through:
ScrollWheel
Keyboard
Autoplay
DEMO
Section Transitions
Base example
![Section Transitions 9 placeholder](https://e-addons.com/wp-content/plugins/elementor/assets/images/placeholder.png)
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.