Animating parts of a headline is in fashion nowadays, it looks good and you can press more information into one sentence by changing parts of it dynamically.

In Kickpages you can make easily such a headline with the addition of a custom code snippet. You can utilize it in any environment and any headline you would like to create. To achieve this please follow the steps below.

First add this small JS library to your header includes:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

As the next step, a custom code element to the place where you want to display your animated header. 

For the content of the custom code block, you need to add the code below:

<h1 style="text-align: left; font-size: 52px; color: rgb(255, 255, 255);" data-bold="inherit" data-gramm="false" contenteditable="false">
<div></div>
</h1>

<style>
.cf-typed-headline-1, h1 {
  background-color: #65A4E8;
  background-image: linear-gradient(90deg, #A2FFCD, #0025FF);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>

<script>
var typed = new Typed('.typed-wrap', {
    strings: ['The #1 online course for launching your funnel agency', 'The #1 online course for Scaling your funnel agency', 'The #1 online course for Getting high ticket clients', 'The #1 online course for Building amazing funnels', 'The #1 online course for Creating true freedom'],
    smartBackspace: true, // Default value
    typeSpeed: 70,
    loop: true,
    loopCount: Infinity,
    showCursor: false
});
</script>

There's different aspects of the code that you can easily edit, but if you have the required programing knowledge, you can customize it as you would like. The top <style> holds the styling for the headline text, it is CSS and you can customize it further, change the font color or gradient. the middle part is the <script> part where you can set your headline text content.

As this script works, if you have different text as each element of the array, the animation will delete all of it, then type out the new text. If you have it like in the example that it always starts with the same ("The #1 online course for ") then it will delete it only until the identical part and type out only the rest of it. The above happens when the "smartBackspace" is set to "true", you can turn it off by changing it to "false".

You can change the "typeSpeed" value to, the higher the number the slower the effect.

You can also turn on the blinking typing cursor effect by setting the "showCursor" to "true"

If you have any issues or questions while implementing this small tutorial, please do not hesitate to contact us and we can help you out.