REVEAL ANIMATIONS

web
mobile

Fitrepreneur pro asked 3 years ago

Hello - I am not clear on what this means: Step 1: Initialize script for animations on a scroll. new WOW().init(); Would you please be more specific as to what I need to add to html, .css and/or .js to initiate the animations 'trigger' when they enter the viewport? thank you

jbankster.web pro answered 3 years ago

Hi, Put this code just before the closing body tag:
    <!-- Animations init-->
    <script>
        new WOW().init();
    </script>
Josh

Fitrepreneur pro answered 3 years ago

Hi Josh - Thank you for the response, but that did not work. Here is my code: <!--First column--> <div class="col-md-12 mb-r WOW fadeInUp"> <!--Card--> <div class="card-overlay" style="background-image: url('img/cards/make_products_customers_love.png')"> ----- <!-- Animated --> <!-- Animations init--> <script> new WOW().init(); </script> <!-- / Animated--> </body> PS I tried both WOW and wow

jbankster.web pro answered 3 years ago

No problem. I need to have the ability to inspect the page your using animations on. This means I need a live link I can goto. Without a link to your page, I can't really help. For your benefit, I will try one time below. If the following doesn't help, then I can't do anything else without inspecting your code. Use lowercase "wow" in the css class names and use uppercase "WOW" in the initialization call. Also remember, These animations depend on JQuery and specific css rules. MDB provides the necessary css rules in their .css file. As long as you have links to JQuery and MDB css, as well as putting the initialization call in, like shown previously... you should be good to go. Simply look into a demo template that uses animation and comes in the download of MDB. Load this in your browser and then look at how the html file is coded and then compare this to your file. In the head of your html document you need a css call to the mdb.css file.
    <!-- Material Design Bootstrap -->
    <link href="<path to your>/mdb.min.css" rel="stylesheet">
Then, at the bottom of the html document,just before the closing body tag, (at a minimum) you need a link to JQuery and place the "WOW" initialization call last in the order. Example:
    <!-- JQuery -->
    <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-2.2.3.min.js"></script>

    <!-- Animations init-->
    <script>
        new WOW().init();
    </script>
After you've made these change, you need to make sure to dump your browser cache and then reload the page in browser. Hope that helps. Not having a link to look at is really the only way I can help. Right now I'm wasting time typing all this out and guessing what your problem MIGHT BE. Josh

Bartłomiej Malanowski staff pro premium answered 3 years ago

Jonathan, is it your problem resolved?
Please insert min. 20 characters.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No