Cut Copy Paste Micro interaction Animation

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
microinteractions animation epic modal window Splitting.js text 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.