ngx-basicscroll - Angular wrapper to basicScroll

, [

Demo

View all the directives in action at https://theunreal.github.io/ngx-basicscroll

Dependencies

• Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install ngx-basicscroll via:

npm install --save basicscroll ngx-basicscroll

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-basicscroll:

map: {
  'ngx-basicscroll': 'node_modules/ngx-basicscroll/bundles/ngx-basicscroll.umd.js',
}

Once installed you need to import the main module:

import { BasicScrollModule } from 'ngx-basicscroll';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice BasicScrollModule .forRoot()):

import { BasicScrollModule } from 'ngx-basicscroll';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [BasicScrollModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import BasicScrollModule:

import { BasicScrollModule } from 'ngx-basicscroll';
 
@NgModule({
  declarations: [OtherComponent, ...],
  imports: [BasicScrollModule, ...], 
})
export class OtherModule {
}

Usage

View in Demo

<bs-element [options]="bsOptions" class="box easeBox">1</bs-element>

Example of bsOptions:

  {
    from: 'middle-bottom',
    to: 'bottom-top',
    direct: true,
    props: {
      '--ty': {
        from: '0',
        to: '100px',
        timing: 'circIn'
      }
    }
  }

Example SCSS:

.box {
  padding: 1em 2em;
  margin: 0 .5em;
  background: #ddd;
  will-change: transform;
}
 
.easeBox { transform: translateY(var(--ty)); }

License

Copyright (c) 2018 Eliran Elnasi. Licensed under the MIT License (MIT)