Loading...

Animations & Text Splitting

AOS Animations
fade-up
 
  <!--fade-up-->
  <div data-aos="fade-up" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">fade-up</span>
  </div> 
 
fade-down
 
  <!--fade-down-->
  <div data-aos="fade-down" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">fade-down</span>
  </div> 
 
fade-left
 
  <!--fade-left-->
  <div data-aos="fade-left" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">fade-left</span>
  </div> 
 
fade-right
 
  <!--fade-right-->
  <div data-aos="fade-right" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">fade-right</span>
  </div> 
 
zoom-in
 
  <!--zoom-in-->
  <div data-aos="zoom-in" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">zoom-in</span>
  </div> 
 
zoom-in-down
 
  <!--zoom-in-down-->
  <div data-aos="zoom-in-down" data-aos-duration="800"
    class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
     align-items-center justify-content-center">
    <span class="d-block display-6 text-primary">zoom-in-down</span>
  </div> 
 
zoom-in-up
         
          <!--zoom-in-up-->
          <div data-aos="zoom-in-up" data-aos-duration="800"
            class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
             align-items-center justify-content-center">
            <span class="d-block display-6 text-primary">zoom-in-up</span>
          </div> 
         
        
zoom-in-left
         
          <!--zoom-in-left-->
          <div data-aos="zoom-in-left" data-aos-duration="800"
            class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
             align-items-center justify-content-center">
            <span class="d-block display-6 text-primary">zoom-in-left</span>
          </div> 
         
        
zoom-in-right
     
      <!--zoom-in-right-->
      <div data-aos="zoom-in-right" data-aos-duration="800"
        class="vh-50 rounded-4 rounded-bottom-0 text-center bg-primary bg-opacity-10 p-5 d-flex
         align-items-center justify-content-center">
        <span class="d-block display-6 text-primary">zoom-in-right</span>
      </div> 
     
    

Explore Plugin Documentation

Splitting text Animations
Include Css in page

<!--Splitting css for text animations-->
<link rel="stylesheet" href="assets/css/splitting-text.min.css">


Spilitting-up

<!--SplittingUp-->
<div data-aos data-aos-once="false">
 <span class="d-block h1 text-dark splitting-up" data-splitting>
  Spilitting-up
 </span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
 Splitting();
</script>


Spilitting-down

<!--SplittingDown-->
<div data-aos data-aos-once="false">
<span class="d-block h1 text-dark splitting-down" data-splitting>
Spilitting-down
</span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
Splitting();
</script>


Spilitting-left

<!--Splitting Left-->
<div data-aos data-aos-once="false">
<span class="d-block h1 text-dark splitting-left" data-splitting>
Spilitting-left
</span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
Splitting();
</script>


Spilitting-right

<!--Splitting Right-->
<div data-aos data-aos-once="false">
<span class="d-block h1 text-dark splitting-right" data-splitting>
Spilitting-right
</span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
Splitting();
</script>


Spilitting-zoomIn

<!--Splitting ZoomIn-->
<div data-aos data-aos-once="false">
<span class="d-block h1 text-dark splitting-zoomIn" data-splitting>
Spilitting-ZoomIn
</span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
Splitting();
</script>


Spilitting-zoomOut

<!--Splitting ZoomOut-->
<div data-aos data-aos-once="false">
<span class="d-block h1 text-dark splitting-zoomOut" data-splitting>
Spilitting-ZoomOut
</span>
</div>


<!--Splitting js for text animations-->
<script src="assets/vendor/node_modules/js/splitting.min.js"></script>
<script>
Splitting();
</script>


Explore Plugin Documentation

Let's start building stunning websites

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.