Using Animate.css in C5.6

Permalink 1 user found helpful
I am doing a site and am trying to implement the Animate.css script into the site. (http://daneden.github.io/animate.css/... ) NOTE: I am using Concrete 5.6

I just thought I could add the animate.css file to the theme's root folder and then pull onto the page using the header link:
<link rel="stylesheet" href="animate.min.css">


Then, by rights, shouldn't it show the animation if I add the class to a given block using block>design>css > css class name

I tried that but it is not working... I guess maybe I did not place the animate.css in the right spot? Anyone know how to do this? Do i need more files than just the animate.css.....

Again, the script I am trying to use is:http://daneden.github.io/animate.css/...

THANKS!!

CharismaBusiness
View Replies: View Best Answer
enlil replied on at Permalink Reply
enlil
I've done some playing with animate.css in 5.6. It can depend on what animation and where on the page it renders. Simply applying the class means the animation happens when the page renders, whether the viewer is looking at that element at the time or not. I will pm you a working starter package in hopes it helps you.
CharismaBusiness replied on at Permalink Reply
CharismaBusiness
Awesome @enlil, thanks for sharing your block, it worked like a charm... after getting rid of the "." between classes as @Steevb said, it fixed my issue, but adding your block enabled the user to actually see the animation as they scrolled rather than on page load!
Steevb replied on at Permalink Reply
Steevb
To apply the animation you need two classes. Click 'Design', then click the 'CSS' tab, then add the desired animaton. i.e. 'animated shake', DO NOT add the dots, just type the word/effect you want after 'animated'.
CharismaBusiness replied on at Permalink Reply
CharismaBusiness
Thanks @Steevb That was my problem. I was putting the 'dot' between both classes. I appreciate the fix, and also @enlil's block fixed my other problem which was making the animation appear as the user scrolled onto it.
CharismaBusiness replied on at Permalink Best Answer Reply 1 Attachment
CharismaBusiness
For future reference, I have actually have found a better solution to use the Animate.css library and it only shows as a user scrolls down the page. I am super excited. It uses the script wow.js found here:http://mynameismatthieu.com/WOW/index.html...

First step is to install the WOW folder (file attached) at the the theme root at /packages/your_theme/themes/theme_name/wow

From there you can call everything onto the page by placing the following code in the header (via dashboard>systems and settings >tracking codes):

<link rel="stylesheet" href="/packages/your_theme/themes/theme_name/wow/css/animate.css">
<script src="/packages/your_theme/themes/theme_name/wow/js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>


This code calls both the js and the css necessary

From there, all one has to do is add class names to individual blocks by using the class option under "design"

each class name should have "wow" as the first word... for example
wow fadeIn


This method also allows for all the customization options animate.css allows... see the wow documentation at:http://mynameismatthieu.com/WOW/docs.html...

Hope this helps someone out!
enlil replied on at Permalink Reply
enlil
Nice. Thanks. Will certainly be having a look.
Steevb replied on at Permalink Reply
Steevb
Okay, looks great, however animations only work one way with CSS and no backup!

Once seen, never seen again?

Try playing with: http://lwiesel.github.io/jquery-fadethis/...