All Projects → Nicell → Nice Anim

Nicell / Nice Anim

Licence: mit
An animate on scroll Web Component built with StencilJS

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Nice Anim

Atoms
Atoms for Blaze UI
Stars: ✭ 1,505 (+6443.48%)
Mutual labels:  webcomponents, stencil
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+199039.13%)
Mutual labels:  webcomponents, stencil
Deckdeckgo
The web open source editor for presentations
Stars: ✭ 1,117 (+4756.52%)
Mutual labels:  webcomponents, stencil
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-26.09%)
Mutual labels:  webcomponents, stencil
solar-components
Web Components Implementation of Solar Design System
Stars: ✭ 16 (-30.43%)
Mutual labels:  webcomponents, stencil
gatsby-remark-highlight-code
Adds stylish cards and syntax highlighting to code blocks in markdown files
Stars: ✭ 63 (+173.91%)
Mutual labels:  webcomponents, stencil
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+42856.52%)
Mutual labels:  webcomponents, stencil
web-photo-filter
A Web Component to apply Instagram-like WebGL filters to photos
Stars: ✭ 105 (+356.52%)
Mutual labels:  webcomponents, stencil
domy
Custom Elements Storage
Stars: ✭ 77 (+234.78%)
Mutual labels:  webcomponents, stencil
Awesome Stenciljs
List of Awesome Web Components Built with StencilJS
Stars: ✭ 520 (+2160.87%)
Mutual labels:  webcomponents, stencil
Scrolldir
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Stars: ✭ 679 (+2852.17%)
Mutual labels:  scroll
Reactive Elements
Allows to use React.js component as HTML element (web component)
Stars: ✭ 695 (+2921.74%)
Mutual labels:  webcomponents
Slim.js
Fast & Robust Front-End Micro-framework based on modern standards
Stars: ✭ 789 (+3330.43%)
Mutual labels:  webcomponents
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-4.35%)
Mutual labels:  webcomponents
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+2726.09%)
Mutual labels:  scroll
Gravityslider
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.
Stars: ✭ 784 (+3308.7%)
Mutual labels:  scroll
Wxp Ui
小程序插件合集(下拉刷新, 拖拽排序, 索引列表, 日期选择, 侧滑删除...)
Stars: ✭ 636 (+2665.22%)
Mutual labels:  scroll
Rendertron
A Headless Chrome rendering solution
Stars: ✭ 5,593 (+24217.39%)
Mutual labels:  webcomponents
React Virtual List
Super simple virtualized list React component
Stars: ✭ 597 (+2495.65%)
Mutual labels:  scroll
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-4.35%)
Mutual labels:  scroll

nice-anim

Built With Stencil npm


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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].