Home > Programming, Servers & Scripts >

---

Create An Animated CTA WITHOUT Images - Just A Few Lines Of Code. (10)

---

So, a little while ago I talked about using CSS3 animations in your landing pages. They're great - they give you a lot of the attention-grabbing elements of animated GIFs without the filesize problems.

But how do you do that?

Well, today I'm going to show you one simple use of CSS animations: creating an animated Call To Action for your lander.

Animated CTAs are well known to provide a subtle boost to CTR, but using them for mobile has always been a bit tricky, because of the filesize implications of adding an animated GIF. But now, you can use CSS to animate them with no loading time slowdown whatsoever - and they'll look smoother than GIFs in the bargain!


What Do I Need To Do This?

You'll need to be able to edit the HTML of your lander, and have a basic understanding of HTML tags.

Beyond that, you don't need any coding knowledge to use the basic version of this technique. Some knowledge of Javascript might be handy if you want to get a little more advanced, but I'll explain most of what you need to know.


How To Do It

Setting this up is actually incredibly simple.

First, add a couple of items to your CTA. You'll need to add a new class called "attention", and you may need to change the display type of your CTA to be "block".

To do that, just add

to your CTA's surrounding HTML tag.

For example, if your CTA was

<a href="mytrackerlink.com/blahblah/">Click Here!</a>

then you would change it to be

<a href="mytrackerlink.com/blahblah/" class="attention" style="display:inline-block" >Click Here!</a>

Now, just before the closing </body> tag of your landing page, add the following code:

That's it - you're done. Save, upload to your server, and you'll see the effect immediately - your CTA will bounce invitingly.



Customising The Code

There are only really a few lines that you need to customise to change all sorts of things about this code.


Timing

If you want to change the timing, that's all run by the setInterval line. The number there - 1500 - is in milliseconds, and governs how often your CTA gets the initial "push" which starts its animation off. After that, it runs on a spring simulation.

If you want to give it a push more often, decrease that number. If you want to do so less often - and you may find that less often is more effective - increase the number.

If you want it to run sooner when someone arrives on the page, add another line above setInterval:

setTimeout(CallToAction, 500);

That line will run it once, after the page has been loaded for the number of milliseconds you specify. In this case, the animation would run once after 500 milliseconds.


Animation

Snabbt, the library we're using here, only allows us to control four properties: position, rotation, scale, and opacity. (Why? Because they're the only things a web browser can reliably animate fast.) But that's enough to do a lot with the animation.

The line which controls the primary animation is:

scale: [1.4, 1.4, 0],

Currently, it's set to give the animation an initial "push" increasing the scale of the X and Y dimensions of the element by 1.4 each. If you change the numbers there, it'll change the size that the element increases to.

If you change "scale" to "position" or "rotation", you can instead have your element move or rotate - it'll spring back to its original position.

If you want to change how the animation runs after that, you can change the SpringConstant and SpringDeceleration. SpringConstant will control how stiff the spring is considered to be, whilst SpringDeceleration will control how fast the animation stops. If you want it to end faster, for example, increase the SpringDeceleration.

There's lots more you can do with Snabbt - check out the full documentation for details about incorporating secondary animations, opacity, skew functions and more.


Controlling a different element

To control a different element, just set the element you want to control to have the class name "attention". It'll need to be a block-level element, too - check using Inspect Element on Firefox or Chrome if you're not sure. If in doubt, just set style="display:inline-block" .

You can control more than one element with the same animation. If you set multiple elements to all have the class name "attention" they'll all animate at the same time.


And that's it!

We've only scratched the surface of what you can do with CSS3 animation here. If you want to see more complex things you can do with snabbt - never mind other JS libraries - check out their demos, which are pretty impressive.These techniques open up everything, up to and including running full 3D engines within the web browser!

But for now, animating your CTA is a simple, practical technique that can give your landers an immediate boost!

Questions? Comments? Confused by any of the instructions or did something not work? Or has it worked REALLY WELL? Let us know below!

---

Thanks caurmen for this great sharing. I'll definitely test it asap.
I just noticed that the last curly bracket is too much in code.

---

Great guide. I spent the day figuring out his rotating text. Coincidence to find your guide now after messing around all day. Thanks

---

Advice anyone..

I've managed to combine Caurmen's example with the attention animation button example on the Snabbt site..

Any idea how I would fade the element in? Say after 4000 period?

I've tried using the opacity with a delay/duration etc.. but can't seem to get it working..

This is what I have that is working with a 4000 delay to start animating .. What I want it is fade in, then begin animation after 4000ms

(function(window, document, snabbt) {

function CallToAction() {

snabbt(document.querySelectorAll('.attention'), 'attention', {
rotation: [0, 0, Math.PI/3],
springConstant: 2.3,
springDeceleration: 0.4,
duration: 3000,
});
}

setInterval(CallToAction, 4000);
}
)(window, document, window.snabbt);

---

@Mr App - dammit, you're right! That'll teach me to pull out an extraneous bit of code before publication and not test it. Edited - thank you.

@elephant - no worries!

@dynamicsoul - You'll need to animate the opacity outside an attention animation - in further testing, I've discovered that it doesn't seem to work as an attention animation.

This code will fade an element in over the time specified in "duration". You'll need to set the initial opacity of the element to 0 in the CSS.

---

nice library. I used something like this on affkit, but it's css3. This looks very customizable and fast.

---

Thanks Caurmen, I'll try get it working tomorrow when I have time to play. For now I did a display:none and javascript fade on a div haha.. easy hack.

---

Thank you, but i have an issue, my button disappear after applying this method and i get just animated text, how can i fix that please ? my button show up with this code : <a href="tracking link"class="css3button" aign="center">download</a>
and not when i add : <a href="tracking link"class="attention"style="display:inline-block">download</a>

---

Perhaps this will work?

You're removing the css3button class in the second markup, that would remove the button format.

---

Yes perfectly, thank you

---

Home > Programming, Servers & Scripts >