Animation on scroll shortcode for WordPress

AOS library must be enabled in WordPress admin dashboard -> Chap Theme -> General.

Animation shortcode arguments

fade

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

flip-up

flip-down

flip-left

flip-right

slide-up

slide-down

slide-left

slide-right

zoom-in

zoom-in-up

zoom-in-down

zoom-in-left

zoom-in-right

zoom-out

zoom-out-up

zoom-out-down

zoom-out-left

zoom-out-right

linear

ease

ease-in

ease-out

ease-in-out

ease-in-back

ease-out-back

ease-in-out-back

ease-in-sine

ease-out-sine

ease-in-out-sine

ease-in-quad

ease-out-quad

ease-in-out-quad

ease-in-cubic

ease-out-cubic

ease-in-out-cubic

ease-in-quart

ease-out-quart

ease-in-out-quart

top-bottom

top-center

top-top

center-bottom

center-center

center-top

bottom-bottom

bottom-center

bottom-top

Shortcode animation

Animated segment

<segment padded anim="fade">Animated segment</segment>
<segment padded data-aos="fade-right">Animated segment</segment>

To animate a shortcode use the anim or data-aos argument.

HTML element animation

Animated segment

{lt}div class="ui padded segment" data-aos="flip-down"{gt}Animated segment{lt}/div{gt}

To animate a raw HTML element use the data-aos argument.

Fade animations

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<grid two column center aligned stackable>
  <column ten wide left floated anim="fade-right">
    <testimonial red><lorem short></testimonial>
  </column>
  <column ten wide anim="fade-up">
    <testimonial orange><lorem short></testimonial>
  </column>
  <column ten wide right floated anim="fade-left">
    <testimonial yellow><lorem short></testimonial>
  </column>
  <column ten wide anim="fade-down">
    <testimonial olive><lorem short></testimonial>
  </column>
  <column ten wide left floated anim="fade-up-left">
    <testimonial green><lorem short></testimonial>
  </column>
  <column ten wide anim="fade-up-right">
    <testimonial teal><lorem short></testimonial>
  </column>
  <column ten wide right floated anim="fade-down-right">
    <testimonial blue><lorem short></testimonial>
  </column>
  <column ten wide anim="fade-down-left">
    <testimonial violet><lorem short></testimonial>
  </column>
</grid>

Flip animations

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<grid two column center aligned stackable>
  <column nine wide anim="flip-up">
    <testimonial inverted blue small><lorem short></testimonial>
  </column>
  <column nine wide left floated anim="flip-right">
    <testimonial inverted purple small><lorem short></testimonial>
  </column>
  <column nine wide right floated anim="flip-left">
    <testimonial inverted green small><lorem short></testimonial>
  </column>
  <column nine wide anim="flip-down">
    <testimonial inverted red small><lorem short></testimonial>
  </column>
</grid>

Slide animations with delay

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<grid two column center aligned stackable>
  <column nine wide anim="slide-down" anim-delay="100">
    <testimonial stacked secondary><lorem short></testimonial>
  </column>
  <column nine wide left floated anim="slide-right" anim-delay="200">
    <testimonial stacked secondary><lorem short></testimonial>
  </column>
  <column nine wide right floated anim="slide-left" anim-delay="300">
    <testimonial stacked secondary><lorem short></testimonial>
  </column>
  <column nine wide anim="slide-up" anim-delay="400">
    <testimonial stacked secondary><lorem short></testimonial>
  </column>
</grid>

`anim`	Animation.
`anim-offset`	Change offset to trigger animations sooner or later (px).
`anim-duration`	Duration of animation (ms). Available options: 50-3000 with a step of 50.
`anim-easing`	Choose timing function to ease elements in different ways.
`anim-delay`	Delay animation (ms).
`anim-anchor`	Anchor element, whose offset will be counted to trigger animation instead of actual elements offset.
`anim-anchor-placement`	Anchor placement - which one position of element on the screen should trigger animation.
`anim-once`	Choose wheter animation should fire once, or every time you scroll up/down to element.

Animation

Demos

Documentation

Social media

Newsletter