Split in Half Text Animation

Split in Half Text 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
direction aware distortion effect hover animation navigation menu text animation
Image: Split in Half Text Animation GIF

With this spectacular text animation, we can see the text split in half when you hover over it. The demo shows you the text being used as a navigation menu but you can use it for anything that you put your mind to. This perspective menu is also direction aware and will move around as you move the mouse. It was created by the talented James Bosworth. 

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

Cut in Half Text Snippet

See the Pen Perspective Split Text Menu Hover by James Bosworth (@bosworthco) on CodePen.0

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.