Animated elements

Last Updated: 18 Dec 2019

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

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

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

animations_example

Add animations

Step I – adding CSS and JavaScript code

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.

animated_elements_EN1

3. Add the CSS code below; if you have also 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/animate.css';
animated_elements_EN2

4. Publish your landing page, leave the editor and go to Dashboard > JavaScript codes tab. Click Add code. In the new window paste the script 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>
animated_elements_EN4

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

Step II – adding classes to chosen 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: https://daneden.github.io/animate.css/. Copy its name.

animate_css

2. Enter the editor again and and select the element, which you want to animate – in our example it is an image.

animated_elements_EN3

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.

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.