Is it possible to create this drag interaction

Design help Animations & Interactions
1

I’m wanting to know if it would be possible to create an animation where a user drags a card out of the screen, resulting in the content of the section changing (Like copy, titles etc)

Like one seen in the hero section of https://campfire.co.uk/

Are there any tutorials out there which explain how this is possible?

Thanks for any responses!

2

Hi @LucaB7 you are looking for keywords Drag and Drop API that give you many videos, articles and API documentation on how to use this API.

3

Hi Stan, I can’t seem to find what you’re suggesting I use? Would you be able to send a link over, thanks.

4

Use your favourite web browser and type “drag and drop API”.
here is documentation

but there is many articles and videos how to work with this API.

EDIT: to simplify it for you here is mental model.
Set elements (image wrappers) as draggable and on drop outside of images container (element where all images are positioned) trigger animation. Don’t forget that this interaction has to be implemented for each image so you need to grab all images and use JS loo method forEach. Animation it self (flying out) create by CSS custom code should be simple but make it happened all together will depend on your developer skills.

1 Like