Ideas for Image Motion Trail Animations

Some ideas for mouse/touch responsive animations where images are shown along the path of the user motion.

A few years ago, we shared a fun little effect that displayed an image trail in response to mouse/touch movement. Over time, this effect has continued to be utilized in some interesting website designs.

Today, I’d like to revisit it and present a few updated ideas that align this unique interaction with current trends.

From subtle motions on an inner image structure to rotations and breaking the image apart using clip paths, there are thousands of possibilities for creating unique animations here, and I can’t wait to see you bring this to the next level and integrate it in your projects!

Here we have a spin example; there is a rotation of the images depending on the change of direction of the movement.

The next effect shows a persistent effect, meaning that the image trail “drawn” will remain:

A little tip: in demo 8, we can adjust the rows and columns of the clip paths so you can change the look completely based on the slices/tiles you create. Just a word of caution: too many will create many layers which can slow things down, so don’t abuse 🙂

I really hope you enjoy these ideas and find them inspirational!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!