@ianwalter/sled

A JavaScript micro-library for animating an element's height to create a slide effect

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
116Feb 20, 2021Aug 14, 2018Minified + gzip package size for @ianwalter/sled in KB

Readme

@ianwalter/sled

A JavaScript micro-library for animating an element's height to create a slide effect

npm page

About

I created Sled because I wanted to use [Bootstrap's][boostrapUrl] collapsible navbar menu without having to import a bunch of unnecessary code. Sled is 20 lines of code, 182 bytes, and has no dependencies.

Demo

Click here to see the demo.

Installation

npm install @ianwalter/sled --save

Usage

Vanilla JavaScript example:

import Sled from '@ianwalter/sled'
const sled = new Sled(document.querySelector('#myEl'))

// Slide to a specific height:
sled.slide('100px')

// Toggle between 0 height and the elements natural height.
sled.toggle()

Vue.js example:

import Sled from '@ianwalter/sled'

let sled

export default {
  mounted () {
    sled = new Sled(this.$refs.menu)
  },
  methods: {
    toggleMenu: () => sled.toggle()
  }
}

Related

License

Apache 2.0 with Commons Clause - See LICENSE

 

Created by Ian Walter

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.