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.

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 styles" 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';
  • 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. "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>

  • in the next step, go back to the editor and select the item which you want to animate - in this example it is a text. In the right panel of options, click "Advanced",
  • 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 windows is case sensitive, so you should always type animation name exactly like in the source.

  • and 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 support@landingi.com - we will be happy to help! ;)

Did this answer your question?