Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

195
Views
How does Google Drive create this file drag animation in their website

When dragging multiple files in Google Drive, it does the slick animation where it compresses the files into a stack and displays a counter for the files in the top right corner. The answer I am looking for isn't about the exact CSS required for the animation, but I am looking for an answer that can describe the overall process of how this is done, beginning with the dragstart DOM event. From what I know, when an element starts to get dragged, the browser takes a bitmap screenshot of the element and uses that as the drag cursor image. I also know that you can set the drag image on the dragstart event, however, how are they dynamically generating and setting the drag image with the file name in it?

google drive drag animation demo GIF (2x)

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

It's not a drag image because if you move you cursor fast enough, you'd see that its speed is trying to catch up to you: it's position: fixed elements with the top: and left: (or translate or any number of methods) being from its initial coordinates to your mouse coordinates (mousemove event), and speed being transition: top 0.2, left 0.2.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!