ic Interface bwe-User Interface

Section Transitions

The e-volution! we wanted to create a transition system between the sections that did not require the help of templates or posts and all integrated into the page.

View one section at a time in a truly creative way, animating with more than 50 different effects.
section transitions 1


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 2


  • 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

copypaste element id 1
Right click
copypaste element id 2
Copy ID
copypaste element id 3
Paste in the field


There are several ways to scroll through the sections

section transitions 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 interactions


Interact with the element through:



Section Transitions

Base example


Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This page is Amazing

e-User Interface

Single site


per year

e-User Interface

Unlimited Sites


per year


All PRO plugins

Full Access Pass



Yearly or Lifetime

European citizens: prices shown do not include tax (will be calculated on checkout based on your location and VAT ID).


14 Days money-back guarantee


Insert your email
and proceed to download

Get updates and special offers for e-ADDONS PRO


Get updates and special offers for e-ADDONS PRO

Subscribe to our newsletter

By entering your email, you agree to our Privacy Policy.