Solid Text Hover Animations

Solid Text Hover Animations is a lightweight and easy-to-use SolidJS component that creates text animations on hover.

Getting started

1. Install the package with npm or yarn

   npm install solid-text-hover-animations

   yarn add solid-text-hover-animations

2. Use it in your React components!

import HoverAnimation from 'solid-text-hover-animations';

const Header = () => (
  <nav>
    <HoverAnimation text='About' />
  </nav>
);

export default Header;

Props

| Name | Type | Default | Description | | :------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ | | mode | string | wring | wring The string will rotate as if being wrung out. rotate The string will rotate in 3D fashion, with a duplicate string appearing from below. | | stagger | boolean | true | When set to true, the animations will stagger for each character of the string. When set to false, the whole string will animate as one. |

Dependencies

Solid Text Hover Animations has no dependecies besides Solid.

Browser Support

Solid Text Hover Animations should work in all current browsers as well as Internet Explorer 11. If you discover bugs in older browser versions, please file an issue!

Contributing

Every contribution is very much appreciated. Feel free to file bugs, feature- and pull-requests.

If this plugin is helpful for you, please star it on GitHub.

License

MIT © https://github.com/idealmilk