How to use animations without hurting solar website conversions

Live data currently under-reported

012345678901234567890123456789
Leads (30d)
012345678901234567890123456789
Leads
012345678901234567890123456789
Sales (30d)
£012345678901234567890123456789
Client revenue (30d)
£012345678901234567890123456789
Client revenue
£012345678901234567890123456789
Pipeline (30d)
£012345678901234567890123456789
Pipeline
£012345678901234567890123456789
Average order value (AOV)

🇺🇸
THE STRATEGY RESPONSIBLE FOR $25M+ IN RESIDENTIAL SOLAR SALES IS COMING TO THE USA
|
3/10 SPOTS LEFT
|
19TH APRIL - 8TH MAY
|
CLICK HERE TO LEARN MORE
🇺🇸

All resources

Our core service

Book a call

Our core service

Book a call

January 10, 2025

8:44

How to use animations without hurting solar website conversions

Tonight’s video is about micro-interactions and animations on solar websites.

This came up because a lot of developers applying for our Framer role lean heavily into animation — which makes sense. Framer makes it easy to build beautiful, fluid interactions.

The problem is that animation without restraint usually works against conversion.

In this video I walk through how we think about animations on live client sites: what we animate, what we don’t, and why attention, performance, and accessibility always come before visual flair.

Animations should support the user journey — not compete with it.

If your website feels busy, slow, or distracting, this is probably why.

For context, this video was originally recorded on 9 January 2025, views & strategies may have changed since.

Featuring

Jude Cornish

Chief Commercial Officer

Video transcript

Good evening. Tonight we’re going to talk about micro-interactions and animations for your solar website. This is particularly relevant if you already have a solar website you’re looking to improve, or if you’re planning to develop a new one.

The reason this topic has come to mind is that a lot of developers applying for our Framer position put very significant emphasis on animations. And that makes sense, because Framer allows you to do some really fantastic things quite easily and quite quickly. It’s super fluid, and you can build complex, interactive elements that tell a story.

The problem is that when you overload a page with animations, no matter how good they are, you introduce a few issues. If they’re extensive or complex, you slow the page down, which impacts SEO and overall user experience. You also create distraction for the user and, in some cases, even elements of motion sickness or accessibility issues for people with more complex needs. And finally, you take attention away from the calls to action and the things you actually want people to do when they come onto your website, like calling you, getting a quote, or emailing you.

I’m going to take you through a few examples of animations that we use in a tasteful, conversion-considerate way. Hopefully there are a few designers watching who are currently in our application process, because this is something that’s super important to us. While a lot of you have fantastic skills using Framer animations, we’ve got to put user experience and client conversion first.

This is Infinite Energy’s website. Right off the bat, you can see that the only thing moving on the page is the main button. And funnily enough, that button is the one we really, really want people to click, because it goes straight through to the quote tool, which we’ve found has the highest conversion rate across the site and the strongest buy intent from users.

There are other small animations as well. For example, subtle micro-interactions that give you a little more information and encourage a click. You can hover over elements to reveal extra text, which makes the page feel clean and simple until the user actually wants more information. These are tooltip-style interactions that reduce clutter but still provide depth.

There are sections where you can have a bit more fun, as long as it doesn’t take away from conversion goals. In some sections where there are no calls to action, we’re not too concerned about distraction. In those cases, you might see a playful animation, like an element moving across the screen, just to make the site feel more alive and fluid. But this is intentional. If there were a call to action in that section, we wouldn’t do it.

Another example is where Infinite Energy is an official battery partner. We really want to emphasise that, so we’ve used a more noticeable hover animation with a flicker effect. It draws attention deliberately. If we didn’t want to emphasise that partnership, we wouldn’t animate it at all, because it does add load time and it does pull attention.

You’ll also see subtle animations designed purely to encourage clicks. The cursor might turn into an arrow when hovering over case studies. Project cards reveal a simple “view project” state. Buttons shift slightly or change colour on hover. Location lists highlight smoothly from left to right. Nothing flashes, nothing jumps, nothing shifts the layout around. It’s all very controlled.

Less really is more with this stuff. You might notice tiny details, like an arrow nudging slightly to the right or a button changing colour. These small interactions make the site feel responsive and modern without overwhelming the user.

One of my favourite examples is a very subtle green highlight that animates around a headline on one of our pages. It draws attention, makes the site feel alive, and shows that thought has gone into the design. But it doesn’t stop anyone from clicking the big green button that we really want them to click. It doesn’t interfere with the primary action.

I see far too many websites packed full of animations. Every section slides in, headings animate separately, and elements are constantly moving. It becomes overwhelming very quickly. If you’re looking to get a new website built and your web developer or agency can’t stop talking about clever animations and fancy effects, you should probably raise that as a concern. Their primary objective should be winning you business.

As much as I love animations, pretty effects don’t win you business unless they serve a clear purpose.

That’s all for tonight. I hope you found that valuable. If you already have a website and you want me to take a look and tell you which animations I’d keep and which ones I’d scrap, I’m more than happy to do that at no charge. I genuinely enjoy this kind of thing. I’ll love you and leave you for this one, and I’ll catch you in the next video.

Put your solar business on steroids

We've been helping ambitious, reputable renewables companies dominate their competition since 2024.

012345678901234567890123456789

Leads generated

£012345678901234567890123456789

Client revenue

Book a call

Put your solar business on steroids

We've been helping ambitious, reputable renewables companies dominate their competition since 2024.

012345678901234567890123456789

Leads generated

£012345678901234567890123456789

Client revenue

Book a call

Next up

9:18

Why organic content still matters for solar installers

Organic content quietly compounds over time

Jan 9, 2025

Other resources