EFFECTS

Slide In

Slides in horizontally from the left or right while fading in. The direction is picked by which class you use, not a modifier.

Classes

ClassPlays
fx-slide-left-pl / fx-slide-right-plOn page load
fx-slide-left-st / fx-slide-right-stWhen the element scrolls into view
fx-slide-left / fx-slide-rightAutomatically, when its section scrolls into view

"Left" and "right" describe the direction the element travels from — fx-slide-left starts off-screen to the left and slides right into place.

Options that matter

  • Duration — fx-duration-[n], default 1 second.
  • Delay — fx-delay-[n], default 0.
  • Ease — fx-ease-[name], default power3.out.
  • Start position — fx-start-[pos], default top 85% (scroll-triggered only).

The slide distance (100px) can only be changed from JavaScript — see JavaScript API.

Example

<div class="fx-slide-left-st">Slides in from the left</div>
<div class="fx-slide-right-st">Slides in from the right</div>