If you’re a creative professional working in a visual medium like web design, photography, illustration, or motion graphics, it’s important to put effort into your craft. But even if you’re great at what you do, if you don’t have a well-designed portfolio, you’re missing out on getting your artistry out in front of a bigger audience. This means potentially losing out on getting paid gigs and connecting with other creatives who get excited and inspired by the same things you do.

A portfolio website needs to spark the interest of those landing on it, guiding them through its featured projects and communicating your skills and talents. Including animations not only adds flourishes of action to a user’s experience but can also set your work apart from the many conventional portfolios out there.

Let’s explore some of the great ways that animations can be used along with some real-world examples of animated portfolios to help inspire your own web designs.

1. Hover effects

Hover effects bring digital spaces to life with interactivity and motion. They can be something nuanced, like gently morphing or scaling the thumbnail of a featured project, or can be big and flashy like a rotation or transformation that makes an image or text leap from the screen. Hover effects capture the focus of visitors and provide important visual feedback.

Some of the most effective hover effects out there include:

• Background color changes: Replacing the background color on a section or to a project card while someone hovers over it adds interactivity and brings focus to its content.
• Shifting opacity: Elements that respond with fade-ins or fade-outs add atmosphere and dimensionality as well as provide visitors with feedback.
• Transformations: Hover effects that change the scale, rotate, or trigger a change in position of an element can have a big impact on keeping people interested with what’s on screen.
• Text-overlay: Revealing text on hover through a quick fade-in or having it slide into position not only maximizes screen space but also adds a heightened sense of interactivity.

Created with Framer, Chris Lund’s portfolio is not only a homage to the car culture of his hometown of Long Beach, California, but also a great example of how hover effects can lead to more entertaining user experiences. From the lowrider on the hero screen dropping its suspension to the stream of money flowing from the ‘Say What’s Up’ call-to-action, hover animations bring motion to Lund’s portfolio while offering glimpses of his light-hearted personality.

2. Animated carousels

Have you ever landed on a website that felt like one infinite scroll? Animated carousels break up and extend screen space by revealing content one panel at a time. They also make websites feel more dynamic by breaking up and extending screen space by revealing content one panel at a time.

Geoffrey Bautista’s portfolio website, designed with Framer, is a great example of how animated carousels maximize screen space and add a sense of immediacy. Instead of having to scroll past a static hero section, a horizontal carousel captures visitors’ attention the moment they land, showcasing the versatility of his skills and his refined approach to design.

3. On appear

On appear animations, as the name implies, pop onto the screen as it loads, regardless of whether or not someone has moved. They’re great at bringing instant focus to elements like text and visuals through changes in position, opacity, rotation, scale, and other effects.

Having a strong visual hook when people first land on a website, works so well in drawing them in. Built in Framer, Thibaut Crépelle’s portfolio of 3D and motion work is a fantastic example of using on appear animations to capture visitors’ attention. The action of the words “Let’s make it move” materializing on screen gives greater impact to its message, and the ASCII art of the pi symbol fading-in on an old-school CRT display invokes a sense of intrigue.