The first example on our list is a website where almost no element appears to be static. When you visit the home page of MA True Cannabis, you’re greeted with a large, animated product and a few floating 3D rendered objects. You’ll notice that, on hover, each of these elements becomes animated in a different way, and a fun message encircles them.

But the designers and creative front-end developers paid just as much attention to the micro-interactions as they did to this hero section. Everything is intuitive at a glance. When you hover over a link, a fade animation occurs, letting you know the text is clickable. CTA buttons have a brief underline animation that draws attention to them. The slider navigation is handled without any unnecessary arrows, lines or numbers. Instead, there’s a fluid, monochrome shape at each edge of the active slide. When you hover on the shape, it becomes larger and starts moving faster, inviting you to click. Once you do, the color fills the entire screen and transitions into the next slide. Additionally, the bullet navigation in the lower left corner lets us know what we can expect to see on the next slide – another product.

The animation style of the bullets complements the fluid slider navigation style. When we hover on a bullet or switch to the next slide, the spherical background seamlessly shifts places, morphing in to the adjacent bullet.