Cut Copy Paste Micro interaction Animation

Image: Cut Copy Paste Micro interaction Animation GIF

A very fancy cut copy paste micro interaction you can use on your website especially if you offer editable text options on the page. When you select text on the page they get a yellow background and there is a modal window that comes up with three options cut, copy, paste. By Adam Kuhn using splitting.js

When you

  • cut – the selected text just falls down as though the ground from underneath them just fades away.
  • copy – the selected text gets a scan like animation
  • paste – the copied or cut text gets pasted in

If you are having trouble with the pen, try the archived copy on GitHub

Text Editor Snippet

See the Pen Cut/Copy/Paste by Adam Kuhn (@cobra_winfrey) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.