New: Hover Animations in Thrive Architect

Wiggle, wiggle, wiggle...

When looking at the new hover animations in Thrive Architect, I couldn't help myself but singing this Jason Derulo song.

And in essence, both the "wiggle, wiggle, wiggle" Jason sings about and the hover animations do the same thing:

Attract the audience's attention 

More...

How to Use Animations the Smart Way

At Thrive Themes, we try to protect you from gimmicky design trends that bloat your website and decrease loading speed so these hover animations are not one of those!

A well placed (hover) animation allows to attract the visitor's attention to the most important element on the page.

It makes a page more dynamic and especially when you use them on buttons, they can boost your conversion rates (but of course, you should split test that!)

Hover animations have the big advantage that they only occur when the visitor actually engages with the element. This will automatically avoid the "flying objects" syndrome you might have encountered on certain websites who went crazy with in view port animations.

Where and How to Add Hover Animations

Thrive Architect allows you to add hover animations to:

  • Buttons
  • Content Boxes
  • Images
  • Columns
  • Icons
  • Testimonials
  • Call to Action Boxes
  • Guarantee Boxes
  • Styled Boxes

Because you can use Thrive Architect on pages as well as blog posts, these animations can be used just as easily to spice up a sales page "Buy now" button as a quote box in a blog post. 

In order to add a hover animation, select the element and go to the hover state of that element.

Hover state Thrive Architect

Go to hover state of the element

There you'll find a whole bunch of options to apply on hover and in the animations and actions panel, you'll now find the new hover animations.

New Hover Animations Thrive Architect

Animations and Actions with CSS animations and tooltip

In the same panel, you'll also find the tooltip option which allows you to add a tooltip on hover.

Tooltip on hover Thrive Architect

Ready to Use These Hover Animations?

Let me know what you think in the comments below!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

  • Barbara says:

    Hi Hanne. This is a very useful feature. Will it work on mobile?
    Thx

    • Hanne says:

      Hi Barbara,

      No, these are hover animations. On mobile you can’t hover so they wouldn’t animate on mobile.

      • Grant Pasay says:

        Hanne, I actually discovered that, on mobile, if you CLICK an element that has a hover-controlled tooltip, the tooltip will display…but then the tooltip will NOT stop displaying unless you refresh the page.

        Could you make it that, on mobile:

        a) if a person CLICKS an element that has a hover-controlled tooltip, the tooltip displays (as is the case now)

        b) and if they then CLICK the element again, the tool tip stops displaying (which is NOT the case now)

        The reason I ask for this feature is that then I could have an image with a little ‘i’ info-icon in the top-right to indicate you can get more info by engaging the image…on desktop, the user rolls over the image and sees the tooltip…on mobile, the user clicks the image to see the tooltip and then clicks again to hide the tooltip.

        What do you think?

      • Hanne says:

        Hi Grant,

        In my testing I noticed different devices handle “hover” animations differently… But I’ll pass this request on to the dev team.

  • Erick D says:

    Already implemented some new hover animations once they were available. Subtle but nice touch :-)

    • Hanne says:

      Great to hear you already took action on this Erick!

  • Jerry B says:

    It’s a great feature! One important feature is missing in Thrive Architect and that is the ability to create forms. Right now, I use gravity forms for my form building needs, but it would be nice to have it all built in Thrive.

    • Derek Seymour says:

      Hey, Jerry look a little closer ;) Forms have been added in the last update!!

      • Hanne says:

        True :D Find out more about it here

    • Hanne says:

      Spoiler alert ;-)
      Make sure to have the latest version of Thrive Architect and check for the element “contact form”.
      Depending on the features you use from Gravity form, this might be what you’re looking for.

      • Yeah. It’s great for contact forms. I use forms for more than just contacts. Great start though.

  • Derek Seymour says:

    Ah love seeing Thrive Architect move forward and become more feature-rich! I pay yearly for a membership just to support the development of this plug-in alone (the others are all bonus but Architect
    IS the foundation of my online business)

    We need a more powerful “Content Reveal” with the ability to automatically display content upon a second visit… Even a “content disappear” would be amazing to work in line with countdown timers.

    We still need the basic ability to edit the default Toggle Element color (right now we can only change the hover state color)

    I’d love the ability to remove the “Days” and even “Hours” countdown timer fields altogether for a cleaner looking countdown when they’re not needed. As well with more design options enabled.

    Also, this one drives me crazy because I’d love to use this feature for a sales page headline… I’d love the ability to use “Typefocus animation” to only animate the text being typed out once. It will become a powerful tool for sales page headlines then and not constantly be distracting after the initial animation.

    Keep it up, it’s a slightly more crowded space now with more competition but that content reveal element is really your biggest selling point for marketers over other builders.

    • Hanne says:

      Hi Derek,

      Thanks for your input!
      The countdown timer is definitely an element we’ll update and upgrade at some point.
      I’m taking note on your demand about the typefocus animation and the reveal element.

  • Monty C says:

    The animation does not seem to be on the lead generation form. Maybe I’m missing something.

    • Hanne says:

      Hi Monty,
      No it doesn’t this is for page buttons (and other elements) only at the moment.

      • Monty C says:

        Thanks! That will probably be in a future release.

  • Tony says:

    After updating focusblog theme . My website does not load Google font as before. How to deal with this?

    • Shane Melaugh says:

      Please contact our support team about this issue.

  • Nat Green says:

    Sweet. Years ago had a plugin that I loved which allowed for these types of animations but they stopped updating it a long time ago (Smart Thumb I think it was called).

    One thing I liked about it which I’d love to see in Thrive was the ability to have these new animations (wobble, bounce, etc) on the default state as well, not just on hover.

    • Hanne says:

      Hi Nat,

      How did that work on the default state? With a timer? On viewport?

  • Elena S says:

    But in the button in Thrive Leads is it not possibile?
    I don’t find any Animation and Action Tab.
    I always use thrive leads shortcodes in Architect pages to have better statystics!

    • Hanne says:

      Hi Elena,

      No for the moment this is not possible on lead generation buttons.

  • Claudio says:

    Hope that we have this animations on the default state and lead generation form. This could make a big difference :)

    • Hanne says:

      Hi Claudio,

      Sorry this is currently not available on the lead generation element.

  • >

    Join Thrive University (it's FREE!)