“mobile”/ adcombo
Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Dynamic Elements Tool - (22 awesome animation effects to boost your lander's CTR)

Discussion in 'Guides, Case Studies and Tutorials' started by crysper, Aug 3, 2014.

  1. crysper

    crysper Moderator moderator Service Manager affiliate

    Dynamic Elements Tool

    I know I told you I will launch this tool earlier, but as some of you know I'm working really hard on LPOptimizer, a landing page optimization tool, which I haven't managed till now to launch it since it becomes really complex(integrated with all major trackers) and I don't have the $ millions in funding like Optimizely/VWO had.

    Dynamic Elements Tool

    Anyway, many of you were waiting for this to come out. I put some work on it and I hope you'll enjoy it. Currently there is no other tool like this on the market, even though an experienced tech guy can implement the animations manually, this tool will save you a lot of time...and I'm sure many of you haven't thought of using animations on your landers, mostly because there wasn't an easy way to add those to the CTA or other HTML elements.

    Animation or any other dynamic stuff on your lander can improve your CTR and CR quite a lot. I used in the past 2 animations on my CTA on a gaming lander, when I advertised on FB and I got about 13-18% increase in CTR, just by making my call to action "shaking" after the visitor landed on the page. Why that worked? That's the same idea of using red borders on banners, it's because it grabs users attention and shifts their focus directly to the call to action...it's something like: hey, i'm here! click me!

    Animations are not only for the CTA elements of the lander, you can also animate your image or headline, making your lander look very professional. Also, it's not limited only to landers, you can use it on any website...like making the menu links bounce when you hover over them and so on. Overall, this gives you a nice edge and style to your lander/website.

    AffKit.com   Dynamic elements.jpg

    • easy to configure
    • 22 animation effects available for any HTML elements
    • 4 triggering actions included
    • repeat an animation every x seconds, constantly grabbing user attention to the important elements
    • select one or multiple HTML elements to apply the effects, either by ID attribute or CLASS attribute
    • uses optimized CSS3 and pure Javascript, the browser global compatibility is around 83%, including mobile
    • no coding skills required for implementation

    As you can see, the animations can be triggered in 4 ways:

    1) Repeating the animation every x seconds: this feature combined with the "attention effects" group will keep the visitor's attention on the element you want to apply the effects to. This usually works very well for increasing the CTR, so my advice is to use it on the call to action(CTA) buttons.

    2) Just after page loads: I think you all saw those fancy, modern websites, especially for mobile apps, with sliders and animations. You don't need to go that far, but you can use this option to give a slightly modern feel to your pages, like with image zooming in or the heading rolling in when the visitor sees the page for the first time.

    3) On element mouse over: you can use this mostly on click-able elements like links or call-to-actions. The animation start only when the visitors hovers over the element.

    4) On element click: the same as above except that the animation starts when the element is clicked.

    How to add the effects to your lander

    All the AffKit tools are designed to be extremely easy to use, you just have to follow the steps presented on the tool page.

    For those who may encounter issues on Step 3:
    Open your landing page with a text editor and look for the HTML element you want to apply the effect. It may be a link (<a>) or image(<img>), which may have or not a ID or CLASS attribute. I'm considering that you already know what an ID/CLASS attribute is, if not...give a google search or look here for a simple explanation.

    Once you find the HTML tag of the element you want to apply the effect to from the landing page, grab it's id or class value(if the tag doesn't have any, add it your own...a random unique value like id="whatever" or class="whatever") and paste it on Step 3 input box.

    Click Next, copy the code given and paste it on the lander, just before the closing head tag. That's all.

    Let me know what do you think guys. If you have any questions/suggestion please let me know here.

    Link to the tool
    Last edited by a moderator: Aug 29, 2014
    6 people like this.
  2. terraleads
  3. azgold

    azgold Super Moderator Super Mod moderator affiliate

    Crysper, I think your tools are just awesome! Thank-you soooo much!
  4. crysper

    crysper Moderator moderator Service Manager affiliate

    Thanks. I'm glad you like them.
  5. xploit

    xploit Affiliate affiliate

    Great - thanks for this ! :D
  6. mutantbull

    mutantbull Affiliate affiliate

    thank you for this awesome tool.
  7. rick

    rick Get your fix Ninja! affiliate

    Thank you so much for this tool. Will design some landing pages with this awesome tool.
  8. michael pehl

    michael pehl Get your fix Ninja! affiliate

    Remember that these animations do not work in browsers that do NOT support CSS3 animations!

    You can find all CSS3 animations here -> Animate.css
  9. michael pehl

    michael pehl Get your fix Ninja! affiliate

  10. crysper

    crysper Moderator moderator Service Manager affiliate

    Yes, thanks for the link, I'll add that in tool description. Basically it doesn't support IE9 and below(doesn't break the page or anything, just the animation doesn't run, the element will be static), the rest are ok.

    It depends on the traffic source, for example, if we are using these animations on affiliatefix website, 98.9% of the visitors would see them. But that's not an issue to worry about, like I said, most of the visitors will see them and that will be enough to have an effect on the CTR.
    Last edited: Aug 13, 2014
  11. petrijarvinen

    petrijarvinen Affiliate affiliate

    Thank you very much.. helps Massively not only to create but to understand and optimize !

    BR PJ
  12. shadowslayer

    shadowslayer Affiliate affiliate

    really great tools. Will try it on new campaigns.

Top Resources