Skip to content

This is demo for the npm package named yb-seal. SEAL - This is a light weight Scroll Effect Animation Library.

License

Notifications You must be signed in to change notification settings

Yashwanthbyalla/yb-seal-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

yb-seal-demo

SEAL - Scroll Effect Animation Library

This is a light weight Scroll Effect Animation Library.

Lightweight, performance focused (2.3 kb) scroll effect animation library, written in Typescript and compiled to JavaScript. No dependencies!

Seal (Scroll Effect Animation Library) was created to provide a lightweight solution for animating elements upon scroll. It's based on DOM objects which gives amazing performance in terms of checking the element's presence in the viewport.

🚀 Demo

Table of Contents

Install

# Usage with NPM
$ npm install yb-seal

Load it with your favorite module loader or use as a global variable

// ES6 modules
import seal from 'yb-seal';

or
// CommonJS modules
var seal = require('yb-seal');

or
//simply add below line in angular.json file under scripts array:

"node_modules/yb-seal/src/index.js"

And remember to add styles

@import '~yb-seal/src/yb-seal.css';

or

// add below line in angular.json file under styles array:
"node_modules/yb-seal/src/yb-seal.css"

Usage

In HTML, add a yb-seal class to make sure it tracks the respective element and behave accordingly with the scroll. Along with this add the animation name as value, for example:

<div class="yb-seal yb-seal-slide-right"></div>

It will look for all classes with a yb-seal class and launch it's respective animation based on viewport scroll.

Animations

In seal you can easily change animation's classes, by adding a proper yb-seal classes:

  • yb-seal-duration - changes duration of the animation (enter value in seconds)

For example:

<div
    class="yb-seal yb-seal-slide-right" yb-seal-duration="2"
></div>

The library supports several animations:

  • yb-seal-slide-up
  • yb-seal-slide-down
  • yb-seal-slide-right
  • yb-seal-slide-left
  • yb-seal-zoom-in
  • yb-seal-zoom-out
  • yb-seal-flip-left
  • yb-seal-flip-right
  • yb-seal-flip-up
  • yb-seal-flip-down

About

This is demo for the npm package named yb-seal. SEAL - This is a light weight Scroll Effect Animation Library.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published