Elmo
Elmo is a framework that includes styled form elements and javascript for visual effects.
What packages do we use?
By installing elmo, you can:
- Use the Tailwind CSS classes. Here you can find a cheat sheet.
- Use the GSAP functionalities. For the documentation, go to greensock.com.
Quick install
NPM:
npm install @spicycoding/elmo
Yarn
yarn add @spicycoding/elmo
Add visual effects to your website
In your project, include our package like this:
import elmo from '@spicycoding/elmo';
elmo.start();
You can also change the offset so that the fade in effects will be triggered earlier or later.
elmo.start({
offset: 250
});
The package will now automatically search for data-effect attributes. For example, when you have an image which should fadeIn you can use this code to make it work:
<img src="/images/your-image.jpg" data-effect="fadeIn">
Elements that are not immediately visible in the viewport
If (for example) your image is not yet visible on the page load, the effect will be added to a queue. When the visitor scrolls down and the element becomes visible, the effect will be triggered automatically.
Documentation
Basic usage:
| Effect | Default duration | Example code |
|---|---|---|
| slideUp | 0.5 sec. | data-effect="slideUp" |
| slideDown | 0.5 sec. | data-effect="slideDown" |
| slideLeft | 0.5 sec. | data-effect="slideLeft" |
| slideRight | 0.5 sec. | data-effect="slideRight" |
| zoomIn | 0.5 sec. | data-effect="zoomIn" |
| zoomOut | 0.5 sec. | data-effect="zoomOut" |
| fadeIn | 1 sec. | data-effect="fadeIn" |
| fadeOut | 1 sec. | data-effect="fadeOut" |
Multiple effects at once:
| Effect | Default duration | Example code |
|---|---|---|
| slideUp and fadeIn | 0.5 sec. | `data-effect="slideUp |
Change the duration:
| Effect | Custom duration | Example code |
|---|---|---|
| slideUp | 0.75 sec. | data-effect="slideUp:0.75" |
| slideUp and fadeIn | 0.75 sec. and 1.75 sec. | `data-effect="slideUp:0.75 |
Import styled form elements and Tailwind classes
If you also like to use our styled form elements and the Tailwind classes, you can import our all.css file:
@import '~@spicycoding/elmo/css/all.css';
Thank you for using Elmo!
Kind regards,
Pim vd Molen (Spicy Coding)