SenangWebs Animations

Fade Animations

Fade
<div data-swa="fade">Fade</div>
Fade Up
<div data-swa="fade-up">Fade Up</div>
Fade Down
<div data-swa="fade-down">Fade Down</div>
Fade Left
<div data-swa="fade-left">Fade Left</div>
Fade Right
<div data-swa="fade-right">Fade Right</div>

Flip Animations

Flip Up
<div data-swa="flip-up">Flip Up</div>
Flip Down
<div data-swa="flip-down">Flip Down</div>
Flip Left
<div data-swa="flip-left">Flip Left</div>
Flip Right
<div data-swa="flip-right">Flip Right</div>

Zoom Animations

Zoom In
<div data-swa="zoom-in">Zoom In</div>
Zoom Out
<div data-swa="zoom-out">Zoom Out</div>

Bounce Animations

Bounce In
<div data-swa="bounce-in">Bounce In</div>
Bounce Out
<div data-swa="bounce-out">Bounce Out</div>

Slide Animations

Slide Up
<div data-swa="slide-up">Slide Up</div>
Slide Down
<div data-swa="slide-down">Slide Down</div>
Slide Left
<div data-swa="slide-left">Slide Left</div>
Slide Right
<div data-swa="slide-right">Slide Right</div>

Group Animations

Slide Up 1
Slide Up 2
Slide Up 3
Slide Up 4
Slide Up 5
Slide Down
<div
  data-swa-group="slide-up" 
  data-swa-group-type="sequence" 
  data-swa-group-interval-duration="500"
  data-swa-group-offset="200"
  data-swa-group-delay="100"
  data-swa-group-duration="1000"
  data-swa-group-easing="ease-in-out"
  data-swa-group-mirror="true"
  data-swa-group-once="false"
>
  <div>Slide Up 1</div>
  <div>Slide Up 2</div>
  <div>Slide Up 3</div>
  <div>Slide Up 4</div>
  <div>Slide Up 5</div>
  <div data-swa="slide-down">Slide Down</div>
</div>

Advanced Example

Advanced Fade Up
<div
  data-swa="fade-up"
  data-swa-delay="300"
  data-swa-duration="1500"
  data-swa-easing="ease-in-out"
>Advanced Fade Up</div>