e-addons

Share

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

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 2

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

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

Navigation

There are several ways to scroll through the sections

section transitions arrows

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

Interactions

Interact with the element through:

ScrollWheel
Keyboard
Autoplay

DEMO

Section Transitions

Base example

placeholder

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