Nicell / Nice Anim
Licence: mit
An animate on scroll Web Component built with StencilJS
Stars: ✭ 23
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Nice Anim
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
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
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
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>
README
All of the props can be found in the component'sInstallation
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].