From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share a fun mouse interaction effect with you that we found on the VLNC Studio website. The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations.
The animations are powered by TweenMax.
The main idea is to show the images quickly so that a trail forms along the movement of the mouse.
While there’s different ways to show the images, there’s also lots of room to play with the effects that make them disappear.
Demo 3 shows how we can make the images “drop” when they disappear:
We can also add a bit of a squeeze, too:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The last demo explores setting the size of the image to be fullscreen and restricting the movement to the sides only:
This effect is inspired by Ricky Michiels website.
Here’s a short GIF that shows the effect of demo 2 where we scale the images up and fade them out:
We hope you enjoy these demos and find them useful.
References and Credits
- TweenMax by Greensock
- imagesLoaded by Dave DeSandro
- Images from Unsplash.com
