Latest Tools

Animate Elements on Pagemaker

October 27, 2021

5 Min Read

Build high quality landing pages in minutes using Pagemaker
Signup here

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