Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Animation

Animations


Written by Michal Szymanski ,


Final result preview
Previous lesson

In this lesson, we'll add to our Landing Page animations on a scroll. The first thing we have to do is to initialize the animations in our project.

Step 1: Initialize a script for animations by placing this code immediate below Google Maps script:


<!--Animations initialization-->
<script>
new WOW().init();
</script>

Step 2: Add a class .wow to a heading in our intro.


<h1 class="h1-responsive wow">Material Design for Bootstrap 4</h1>

Step 3: Pick an animation style from the list of animations , then add it's CSS class to the HTML element.

Note: If you want to see animations in action before using it, check Live Presentation.


<h1 class="h1-responsive wow fadeInDown">Material Design for Bootstrap 4</h1>

Save the file and refresh the browser. You will see a nice and smoothly animated heading inside your intro.


Let's add more animations. Replace the code of our Intro with the following:


<!--Intro content-->
<div class="full-bg-img flex-center">
    <ul>
        <li>
            <h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Material Design for Bootstrap 4</h1></li>
        <li>
            <p class="wow fadeInDown">The most powerful and free UI KIT for Bootstrap</p>
        </li>
        <li>
            <a target="_blank" href="http://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg wow fadeInLeft" data-wow-delay="0.2s">Sign up!</a>
            <a target="_blank" href="http://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg wow fadeInRight" data-wow-delay="0.2s">Learn more</a>
        </li>
    </ul>
</div>
<!--/Intro content-->

Notice, that we added a special attribute data-wow-delay="0.2s". It gives our animation a delay, which let us create more complicated composition.

You can also use the following attribute:

  1. data-wow-duration: Animation duration

  2. data-wow-delay: Delay before the animation starts

  3. data-wow-offset: Distance to start the animation (related to the browser bottom)

  4. data-wow-iteration: Number of times the animation is repeated


We've used 3 different animations: "fadeInDown" , "fadeInLeft" and "fadeInRight".

If you want we you use any of 74 animations available for MDB.


Save the file and refresh your browser. Now you can see we animated both headings and buttons.


Now you can play with the animations on your own. Or if you prefer, you can download a final file for this lesson and check how I used them.


Our Landing Page is ready. The last thing you should do is to add your own texts, data, and images to it. Then upload it to your server and start making money with your own business!


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next tutorial

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 13

  • User avatar

    swaraj

    Awesome Work Bro.

  • User avatar

    Michal Szymanski

    I'm glad you like it!

  • User avatar

    alexandr.revenoc

    I don't know why - the code is absolutely the same, but I don't see any animations and Social buttons in the don't display - there is only text without color buttons. Why is that happening?

  • User avatar

    Michal Szymanski

    alexandr.revenoc, do you use Free or Pro version?

  • User avatar

    Alexandr Revenoc

    I think it's free. That version I downloaded in your Intro lesson. That's the case?

  • User avatar

    Michal Szymanski

    Yes. Premium component (we use some of them in this tutorial) are available only in Pro version. However animations are part of free package and it should work.

  • benjamin

    The reason there is not animation, is that the wow library is not available in the free package I guess. At least in my case. @Michael, big thanks for the great tutorials. I'm enjoying it.

  • User avatar

    Michal Szymanski

    Benjamin, in MDB we've included a version of WOW library released under MIT (so free to use and modify) licence. Later the owner changed the license, but according to international law you are required to comply with this license, which was concluded at the time of downloading the software. So feel free to use animations with MDB :)

  • benjamin

    Thank you very much Michael. I see clearly now :-)

  • Maciej Krężlewicz

    Witam. W kodzie jest błąd. Trzeba dodać do każdego elementu klasę animate i klasę efektu inaczej nie działa:)

  • User avatar

    Michal Szymanski

    Cześć Maciej. Animacje "na scroll" musisz zainicjować , żeby zadziałały. Kod jest wporządku, przeczytaj proszę uważnie tutorial.

  • User avatar

    James

    My progress is fine. I will upgrade to pro version very soon. Great animation features Michal. Your work is awesome

  • User avatar

    dezzy

    Honest guys at you too good to be truth

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.