The animations used on your landing page appear when your visitor will scroll the page to the place where they are located.
Landing pages shouldn’t be overly animated. The movements distrac visitors from the content on the page.
We recommend animating elements that encourage to take action eg. arrows that indicate the CTA or the buttons. The following example of animation is only intended to present the possibilities of animation. We do not recommend animate landing page to a degree, as shown in the example.
1. Log into Landingi platform, go to the Landing Pages tab and enter the edition of the landing page where you want to add animation.
2. In the editor, go to the Page Settings on the right panel and click on Custom CSS.
3. Add the CSS code below; if you have also other codes here, add it above them, at the top and save changes.
<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
1. Select the name and type of CSS animation, which you can find e.g. here: https://daneden.github.io/animate.css/. Copy its name.
2. Enter the editor again and and select the element, which you want to animate – in our example it is an image.
3. At the right panel, in the widget option enter the name of chosen animation in the field Classes. It should be preceded by the command ‘wow’ and one space, e.g. wow flipInX
Repeat this step for every element which you want to animate.
REMEMBER: The code in Classes field is case sensitive – always type the exact animation name.
4. Publish your landing page.
Animation has been added to your landing page – check if it displays properly.