How Can I do this type of animation in HTML Template like this https://hugebinary.webflow.io/

Question

I am making HTML template. Generally I use WOW.js and animate.css but it doesn't like this example https://hugebinary.webflow.io/

So can anyone tell me which library or package used in this example site https://hugebinary.webflow.io/

Here is my code example https://rito-lara-preview.netlify.app/

Answer 1

No animation in that webpage seems to be possible with only animate.css

If you are referring to the animations on the visibility of the element(scrolling) (as in that webpage) you can use my library animate.css-dynamic.

Example: -

html{
 overflow-x: hidden !important;
}

.scroll{
 height: 400px;
 padding: 10px;
}

.my-section{
  margin: 20px;
  padding: 10px;
  height: 100px;
  border-radius: 10px;
  color: white;
  font-size: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js"></script>
  
  
  
 <h2 align="center" class="ani_fadeInDown">Keep scrolling to see animations</h2>
 <div class="aniUtil_scrollDiv scroll">
 <div class="my-section ani_fadeInLeft aniUtil_active aniUtil_dramatic" style="background-color: red">
 Using animate.css-dynamic
 </div>
 <div class="my-section ani_fadeInRight aniUtil_active aniUtil_dramatic" style="background-color: green">
 Simple to use with utility classes
 </div>
 <div class="my-section ani_fadeInUp aniUtil_active aniUtil_dramatic"style="background-color: blue">
 Uses animate.css for animations
 </div>
 <div class="my-section ani_fadeInUp aniUtil_active aniUtil_dramatic"style="background-color: yellow">
 Give it a try...!
 </div>
 </div>

Note: - Ignore the use of "aniUtil_scrollDiv" I have used it as stackoverflow snip division is not flexible with the body of this website.

Read the documentation for more use cases on the demo webpage.

If you are refering to some other animations from that webpage, that are not possible using animate.css or animate.css-dynamic