Animate Elements on Pagemaker

‍

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:
‍

‍

‍