Skip to content

Elements:Animations

Add beautiful animation effects to elements as they come into view.

Pulsate

Simply add an .animate-pulse-dark (on a light background) or .animate-pulse-light (on a dark background) class to any element to animate it when it comes into view.

Person User online
<div class="position-relative px-2">
  <img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-md bg-dark rounded-circle" alt="Person">
  <span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-dark"> <span class="visually-hidden">User online</span> </span>
</div>
<button type="button" class="mb-1 btn btn-primary animate-pulse-dark">Primary</button>

Animate on hover

Simply add an data-hover="ANIMATION-EFFECT" and optionally data-hover-out="ANIMATION-OUT-EFFECT" attributes to any element.

<i class="ion-social-usd-outline icon-5x icon-sq bg-primary text-white rounded-circle bg-shadow" data-hover="bounceOut" data-hover-out="bounceIn"></i>

Animate in view

Simply add an data-animate="ANIMATION-EFFECT" attribute to any element to animate it when it comes into view.

fade in
<div class="bg-light p-5" data-animate="fadeIn"> fade in
</div>

Effects

You can use all "in" effects that are included in the amazing animate.css plugin to animate in elements.

Using the infinite attribute can support other animation effects like pulse & flash.

If you want an element to disappear from view you can use the "out" effects.

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Options

Animation Delays and Durations

You can delay or alter the duration of an animation effect by including data-animate-delay="TIME-IN-SECONDS" and/or data-animate-duration="TIME-IN-SECONDS" attributes.

This can be useful for staggering animation effects, the example below delays .

1

2

3

4

5

<h3 data-animate="fadeInUp" data-animate-duration="1.5">
  1
</h3>
<h3 data-animate="fadeInDown" data-animate-duration="1.5" data-animate-delay="1.5">
  2
</h3>
<h3 data-animate="fadeInUp" data-animate-duration="1.5" data-animate-delay="3">
  3
</h3>
<h3 data-animate="fadeInDown" data-animate-duration="1.5" data-animate-delay="4.5">
  4
</h3>
<h3 data-animate="fadeInUp" data-animate-duration="1.5" data-animate-delay="6">
  5
</h3>

Infinite

You can add data-animate-infinite="1" to make an animation effect run infinitely.

Breaking news!

<h3 data-animate="flash" data-animate-infinite="1" data-animate-duration="2">
  Breaking news!
</h3>

Examples

In Effects

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp

Out Effects

NOTE: these will disappear from view once the effect has run.

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Special Effects

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
hinge

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.


Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page