Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integration with drag and drop API? #234

Open
IanBellomy opened this issue Nov 13, 2024 · 3 comments
Open

Integration with drag and drop API? #234

IanBellomy opened this issue Nov 13, 2024 · 3 comments

Comments

@IanBellomy
Copy link

It'd be cherry to be able to include a drag-and-drop preview image in a view transition for a concise 'animate the dragged content to its final resting location'.

@bramus
Copy link
Contributor

bramus commented Nov 17, 2024

You can make a View Transition respond to drag by pausing all animations and then controlling them by monitoring the dragDelta. See https://front-end.social/@bramus/111800601352108818 for an exploration of this.

@IanBellomy
Copy link
Author

IanBellomy commented Nov 18, 2024

Apologies for the confusion, let me clarify with an example of the acute limitation in mind.

Here is an example of visual jank resulting from a 'naive' use of view transitions with the drag and drop API.

trimmed.mp4

(Original: https://www.youtube.com/watch?v=uSRlG4hNH50)

Attend to how, when the user makes a destination selection by releasing the content, the dragged content disappears, and the origin element of the drag then animates.

For interfaces like that depicted, the ideal is for the drag preview image to animate to the resting location but the view transition API has no access to drag preview images. If it did, this could be very simple to implement. But in that absence a bespoke solution for drag previews is needed.

Hope this clarifies. ✌️

@bramus
Copy link
Contributor

bramus commented Nov 18, 2024

Thanks for the video. Very clear now :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants