Animated elements

Last updated: March 24, 2021 Written by: Avatar Teresa
share
Table of contents
share
Table of contents

You can use animations on your landing page by adding additional CSS, JavaScript, and proper classes to chosen elements.

The animations used on your landing page appear when visitors scroll the page to the place where they are located.

REMEMBER:
Landing pages shouldn’t be overly animated. The movements distract visitors from the content of the page.
We recommend animating bullet points or elements that encourage visitors to take action e.g. arrows indicating the CTA. Below you can see an example of how animation can work. 

Add CSS and JavaScript codes

1. Log in to your account on the Landingi platform and go to the editor of your landing page. 

2. In the editor, go to the Page Settings (you will find it in the upper right corner of the toolbar) and click on Custom CSS.

animations landing page

3. Add the CSS code indicated below. If you already have other codes here, add it above them, at the top, and save changes.

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

4. Publish your landing page and go to Dashboard > JavaScript codes tab. Click Add code.

5. In the new window paste the script indicated below in Body top position on the Main page. Save the changes.

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

Regardless of the amount of animation on the landing page, you only add the CSS and JavaScript code once.

Add classes to landing page elements

After adding CSS and JavaScript code, you can choose how and which elements of the landing you want to animate.

1. Select the name and type of CSS animation, which you can find e.g. here: Animate.style. Copy its name.

animations

2. Enter the editor again and select the element that you want to animate – it can be an image, icon, or text. Do not animate buttons triggering pop ups and lightboxes.

3. In the widget toolbar on the right, enter the name of your animation in the field Classes. It should be preceded by the command ‘wow’ and one space, e.g. wow flipInX. Do this same for every element that you want to animate.

REMEMBER: The code in Classes field is case sensitive – always type the exact animation name.

4. Publish your landing page. Check if the animation displays properly.

share

Was this manual helpful?