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|fadeIn"

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|fadeIn:1.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)