Product

Create, publish and optimize pages with a drag&drop, pixel perfect and mobile-friendly builder

Speed up the creation process with 400+ customizable templates for landing pages, pop-ups and sections

Track microconversions in your Dashboard and analyze events and clicks with visual map

Build one layout, generate pages in bulk, and power them with dynamic data

Integrate your pages with your favorite mar-tech apps and solutions to get the flow of your campaign going

Use a reliable and secure platform that smoothly handles millions of visits

Solutions

How to generate more traffic and get more leads.

How to reach global audience with language versions of landing pages.

How to take care of your digital footprint.

How to publish non-generic, handcrafted pages.

How to manage larger volumes of pages and clients.

How to deliver personalized content to potential customers.

Resources

Master digital marketing with the help from savvy professionals and increase your website’s conversions

Guides for beginners, set-up instructions and creation tips to get started and optimize your pages

Ebooks, webinars, Landing Page Academy, and other free marketing resources. Learn and become an expert!

Read real case studies of marketers and companies who achieved next-level growth with Landingi

Schedule a one-on-one meeting with us and learn more about the benefits of our platform

Hire a Design Expert or order an import of your existing page from other platforms to Landingi

HomeHelp CenterCreationAnimated elements on landing pages

Animated elements on landing pages

Every element on your landing page can be animated – either by selecting an animation for individual widgets in the right-hand panel of the editor (or applying the same one to all elements within a section through its settings) or by adding custom animations with CSS, JavaScript, and classes.

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. Below, you can see an example of how icon animation can work. 

Pulse animation for Icon widget

Selecting animations in the editor

You can add animations to any widget on your landing page directly from the editor. Here’s how to do it:

1. Click on a widget you want to animate. This can be any widget: an icon, text, image, shape, form, button, or even a section background.

TIP: Be careful with animating entire section backgrounds. Too much movement can overwhelm visitors and reduce readability.

Fade In Up animation for Text widget

2. In the panel on the right-hand side of the editor, turn on and expand the Animation tab. Choose an animation from the dropdown list (Entrance animation type).

See a demo of all available entrance animations.

Animating button on landing page

3. Adjust settings:

  1. Set an animation delay (in seconds) or leave it at 0 if you want the animation to start immediately.
  2. If needed, enable the option to loop the animation.
  3. When editing a section, you’ll also see the option “Apply this animation to every element in the section.” If you select it, all elements inside the section will animate (but the section background itself will stay static).
Animation settings

4. Preview or publish your landing page to see the animation in action. Animations do not play inside the editor.

Fade In Up animation for every element in a section

Adding custom animations

To add custom animations to the landing page elements, you first need to include CSS and JavaScript code. Then, apply classes to those elements to define the animation.

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 Add custom CSS.

When editing, you can go back to Page Settings by clicking on the arrow:

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';

4. If you want to loop your animation, add the following code below your custom CSS – change animation_name to the name of the animation you chose.

.animation_name {
animation-iteration-count: infinite;
}

5. Publish your landing page and go to the Dashboard and then the JavaScript Code tab. Click Add code.

You can enter the JavaScript Code tab directly from the editor:

6. In the new window, paste the script indicated below in the 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>

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.

NOTE: Unfortunately, not all the CSS animations will work on your landing page. Here is the list of unavailable animations:

  • shakeX
  • shakeY
  • heartBeat
  • lightSpeed
  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft
  • jackInTheBox
  • fadeInTopRight
  • fadeInTopLeft

2. Enter the editor again and select the element 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, find the Other tab and enter the name of your animation in the Classes field. 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 the Classes field is case-sensitive – always type the exact animation name.

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

TABLE OF CONTENT
G2 reviews for Landingi