Animated elements

22.02.2019

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.

REMEMBER:
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.

animations_example

Add animations

To add animation, see all the steps below:
1. Select the landing page to which you want to add animated elements, and please click on Edit.

choose_lp1

2. In the editor, go to the settings of a landing page, by clicking on the gear icon in the right option panel.

settings_lp

3. Open the Custom CSS tab and add the following code at the top of all codes (if you have another).

@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/animate.css';
add_CSS

4. Then publish your landing page and go back to the campaign – after going to the JavaScript codes tab, click Add code and copy and paste into the following line of code. Click Save and close.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
save_close_JS_code

5. 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/.

animate_css

6. 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.

go_back_to_edit_lp_CSS
add_class

7. Type the name of the CSS animation in the Classes gap. It should be preceded by the command ‘wow’ and one space. For example: wow flipInX

REMEMBER: The code in Classes window is case sensitive, so you should always type animation name exactly like in the source.

classes

8. Publish the landing page to see the effects.

Was this article helpful?

You might also check:

custom CSS custom Javascript

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.