The animations that you use on your landing page, will appear on the screen when the user navigates the page of the animated item position.
Landing pages as a specific type of pages should not be overly animated. The movement distracts from the content and slows user actions 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. Add animations.
To add animation, see all the steps below:
- Select the landing page to which you want to add animated elements, and please click on "Edit".
- In the editor, go to the settings of a landing page, by clicking on the gear icon in the right option panel.
- Open the "Custom CSS" tab and add the following code at the top of all codes (if you have another).
<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
- Select the name and type of the CSS animation. Different types of CSS animations can be found e.g. https://daneden.github.io/animate.css/.
- At the next step, go back to the editor and select the item which you want to animate - in this example it is a text.
- Type the name of the CSS animation in the "Classes" gap. It should be preceded by the command 'wow' and one space. For example:
The code in "Classes" window is case sensitive, so you should always type animation name exactly like in the source.
- And as the last one - after the landing page publication, the selected element will be animated.
If you will have any other questions let us know at firstname.lastname@example.org - we will be happy to help 😉