I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

A website testimonial showcases the quality and success of a site’s products or services. Testimonials often come directly from customers and serve as a successful marketing method. When potential customers are researching you online, they're getting to know you by way of the content of your website. Understandably, many of them might be skeptical or hesitant to trust you right away.

COIDEA - Brilliant Animated Testimonials Page

In that situation, the testimonial page is one of the most powerful, important parts of your site. Sure, you can and should use your homepage to push your company’s strength, but it means a whole lot more when rave reviews come from unbiased customers. That's the reason why testimonials can be very powerful for helping to establish trust and encouraging visitors to buy, sign up, fill out a form, or take whatever action you are after. In that sense, for websites and online businesses, testimonials can be even more useful than traditional businesses. To prove the value of what you have to offer, why not then let your happy customers do the talking? And if they say something nice about you, how to show that in the right way on the website?

Website testimonials can be displayed in different ways, and I chose to think outside the box and display this page with multiple amazing animations in "broken waves" style. The first thing you can see is that mouse cursor has custom style and it contains two circles. The main circle comes with black background and secondary with a white background, which follows the main circle every time we move the cursor. Further, this testimonials page collect animations for main headline and inactive testimonials items which execute on load and move those in loop slowly and randomly up and down.

The main animation executes but when we click on "SHOW TESTIMONIALS" button. Main headline and text move slightly to the top and disappear, our trigger button changes text "SHOW" to "HIDE" and move to the top of the page and our testimonials items move up to the middle of the viewport and become an active state. That means that from now on this items are clickable, in an accordion style and at one point can only one item have an active state. At the end click on the "HIDE TESTIMONIALS" put all the sections and animations to the default state.

I hope you liked the way I created a testimonials page and find my demo inspiring and useful!

References and Credits