Animation

Chap optionally includes Animate on Scroll library to animate elements when they appear on the user screen.

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

Animations can be configured by adding data-aos property to HTML elements or shortcodes. With shortcodes it's also possible to use a shorthand alias anim as the argument.

[animation] shortcode arguments
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.
Animations
Fade animations
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
Flip animations
flip-up
flip-down
flip-left
flip-right
Slide animations
slide-up
slide-down
slide-left
slide-right
Zoom animations
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
Easing functions
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
Anchor placement
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top
Shortcode animation
Animated segment
Animated segment
<segment padded anim="fade">Animated segment</segment>
<segment padded data-aos="fade-right">Animated segment</segment>
Notes
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}
Notes
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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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>

Leave a comment

Your email address will not be published. Required fields are marked *