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-subtle 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-subtle 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-subtle 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-subtle 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-subtle 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-subtle 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-subtle 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-subtle 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-subtle 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  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  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  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  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  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  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.