Latest Tools

Animate Elements on Pagemaker

October 27, 2021

5 Min Read

Build high converting mobile-first pages in minutes!
FREE LIFETIME PLAN

Pagemaker now allows you to use animations on your landing page by adding simple CSS and Javascript.

You can find a list of ALL the possible animations here: https://animate.style/

The process of adding animations to your Pagemaker landing page is incredibly easy and in 2 parts. We highly recommend going light with the animations and using them on important elements like call to actions.

1. Copy this code:

Go to your landing page editor, click on settings and open up the Javascript module. Paste this code into the header.

<script>
var link = document.createElement('link');
   link.id = 'id2';
   link.rel = 'stylesheet';
   link.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
   document.head.appendChild(link);
</script>

2. Select your animation:

Click on the element/button you want to animate and open up the attributes tab. From here you will add your preferred animation code. Find animations here: https://animate.style/ Below we break it down.

For example: animate__animated animate__tada animate__infinite

this is a must prefix: animate__animated
this is for type of animation: animate__tada
optional infinte loop: animate__infinite

Watch how to do it here:

Posted on

October 27, 2021

in

Latest Tools

category

Recommended Blogs
View All

Try Pagemaker risk-free with no credit card required

Access our free life time plan
Access our free lifetime plan