Web Animation Trends We’re Lovin’
Since it’s the month of love with Valentine’s Day right around the corner, we thought it would be fun to share some website trends we’re seeing and lovin’.
It’s always fun to see how websites are going to evolve each year and they just keep getting better and better. Animation continues to take center stage. We’re seeing (and loving) a clear trend towards websites with simple and clean designs, but with clever, interactive, and impactful animations that take them to the next level.
Animation is a great tool for drawing the eye and navigating the user through your site.
Here are a few animation techniques we love and think will kick things up a notch:
Resizing Large Images
We’ve incorporated this trend in a few of our recent projects, once where the image enlarges on scroll, and once where the image gets smaller. It may not seem like much, but that simple movement creates a more unique experience that captures the user’s attention and creates some anticipation for what’s next on the page.
Spinning Text Circles
We think this animation looks so nice. Is it tricky to read the text? Maybe. But, we think it’s still a cool way to personalize a website, especially when the brand uses circles throughout. Just make sure the spinning copy isn’t critical to the user experience.
Continuous Rotating Text
It’s such a simple animation but makes a plain statement of text more fun and really draws the eye to key phrases. We’ve also implemented this on a few websites recently. On this site we have the rotation anchored to the user’s scroll, which is a fun way to put the user in control. We have found value in using this tactic to draw a little extra attention to core brand messages.
Force Scroll
We like this trend because it forces you to scroll through info that you don’t want to take up a whole lot of space, but you feel is still very important for the user to see. You guessed it, we’ve used this one a few times recently as well.
In a recent website launch for our client Mo’ Dank, it was important for the brand to properly introduce their product line. We built the product section to scroll horizontally. This change in scroll direction grabs the user’s attention and allows them to really focus on the products.
We also use a “pinned” technique in a recent project for our client Community Partners. As you scroll, the page freezes, but the scroll action rotates through critical content. Again, this pinning action suggests to the user that this is important information to consume.
Background Color Change on Scroll
We like this animation technique because it’s a subtle yet more creative way to help indicate the beginning of a new section on the page. We used this technique on a project for our client POOLHOUSE. There are two main sections on this page, an “Info” section, and a “New Biz” section. They wanted these to feel like unique pages but still flow seamlessly from each. A background color change felt like a great way to do that.
Any new trends that are inspiring you?
