Coffeekraken-s-animation-component NPM

Coffeekraken s-animation-component

Provide some cool animations to display your titles, etc... with style. They are all triggered when the element appear in viewport.

Table of content

Readme features

Multiple cool animations to display your titles, etc... with style
Trigger the animation when element is in the viewport
Support for [anim-activator] feature

Install

npm install coffeekraken-s-animation-component --save

Get Started

First, import and init sugar into your project.

Then, import the component into your javascript file like so:

import animLettersInReveal from 'coffeekraken-s-animation-component/dist/animLettersInReveal'
import animLettersInRain from 'coffeekraken-s-animation-component/dist/animLettersInRain'
import animSlideIn from 'coffeekraken-s-animation-component/dist/animSlideIn'
// init listeners
animLettersInReveal();
animLettersInRain();
animSlideIn();

Then import and generate the classes using the provided mixins like so:

@import 'node_modules/coffeekraken-s-animation-component/index';
@include s-anim-letters-in-reveal-classes();
@include s-anim-letters-in-rain-classes();
@include s-anim-slide-in-classes();

Then simply use it inside your html like so:

<h1 anim="letters-in-reveal">
	My cool animated title
</h1>
<h1 anim="letters-in-rain">
	My cool animated title
</h1>
<h2 anim="slide-in-up">
	My cool animated title
</h2>
<h2 anim="slide-in-down">
	My cool animated title
</h2>
<h2 anim="slide-in-left">
	My cool animated title
</h2>
<h2 anim="slide-in-right">
	My cool animated title
</h2>

`[anim-activator]`

You can tell you animations to be played depending on the state of one of his parent node. To do that, simply apply the anim-activator attribute on the parent you want and handle the animation state on this element directly.

You animation will be played if the anim-activator node has the .active class or the [active] attribute. This is useful for example in a slider if you want each slides to trigger the animations independently.

<!-- here's an example -->
<div anim-activator>
	<h1 anim="slide-in-up">The animation will not been played</h1>
</div>
<div anim-activator class="active">
	<h1 anim="slide-in-up">The animation will been played</h1>
</div>

WARNING Even if your element is not in the viewport and you use the anim-activator, your animation will be played.

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE11+	last 2 versions	last 2 versions	last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.
The webcomponent API (custom elements, shadowDOM, etc...) is not supported in some older browsers like IE10, etc... In order to make them work, you will need to integrate the corresponding polyfill.

Contribute

This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...