nice-anim

Example of use from nick.winans.codes

What is it?

nice-anim is a Web Component that allows you to easily animate elements when scrolled into view by wrapping them.

Usage

<nice-anim direction="up" duration="500">
  <p>Animating text!</p>
</nice-anim>

All of the props can be found in the component's README

Installation

There are 3 options to install nice-anim.

Script tag

• Put <script src='https://unpkg.com/nice-anim/dist/nice-anim.js'></script> in the head of your index.html.
• Then you can use the element anywhere in your template, JSX, html etc.

Node Modules

• Run npm install nice-anim --save
• Put <script src='node_modules/nice-anim/dist/nice-anim.js'></script> in the head of your index.html.
• Then you can use the element anywhere in your template, JSX, html etc.

In a stencil-app-starter app

• Run npm install nice-anim --save
• Add import 'nice-anim';
• Then you can use the element anywhere in your template, JSX, html etc.

Intersection Observer Polyfill

Some browsers don't have the Intersection Observer API. You can include the following script to add support to those browsers without it.

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

You can read more about Intersection Observer polyfills here.