Image Dragging Effects

A set of playful dragging effects for images using various techniques.

By in Playground on
ImageDragging_featured
Demo Code

Today we’d like to share a little set of playful dragging effects with you. The idea is to animate images as they are being dragged, and distort, scale or apply filters to them. For some examples we tie the intensity of the effect to the speed of the dragging motion.

The inspiration for these effects come from two Dribbble shots by Zhenya Rynzhuk:

Here’s a short video of all effects:

We hope you like these ideas and find them useful!

References and Credits

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.

Audio Reactive Shaders with Three.js and Shader Park

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Distributed Letters Animation Layout

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 4

Comments are closed.

  2. Hello this is amazing work. Thank you. I have downloaded the source but doesn’t seem to work. It just pulses. Can you please re-upload or tell us how it can work Thank you

    • Hi Sarah, thanks for your message. I’ve just tested it again and it seems to be OK on my side. Have you run “npm install” and then “npm start”? Any errors you see in the console? Thanks.