0

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/

Suraiya Aysha
  • 21
  • 4
  • Can you please tell us exactly which animation are you referring to here...or give some more details about what are you trying to achieve? – Hypermystic Apr 21 '22 at 10:53

1 Answers1

0

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

Mohammed Khurram
  • 616
  • 1
  • 7
  • 14