npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bodymovin-lottie-plus

v1.1.2

Published

Helper script to integrate faster bodymovin / lottie animations in a html document.

Downloads

2

Readme

bodymovin-lottie-plus

Little helper to integrate faster the bodymovin / lottie animations in a html page.

Installation

Add this to your html:

<script src="bl-plus.js" type="text/javascript"></script>

(and be sure to have bodymovin/bodymovin-light/lottie loaded in your html as well)

Usage

Here's a basic example:

<div data-blp="balloon-animation"></div>

An advanced example:

<div data-blp="balloon-animation" data-blp-loop="true" data-blp-preserve-ratio="false" data-blp-speed="2.5" data-blp-autoplay="false"></div>

BLP is looking for the [data-blp] attribute to load. It's using this element as wrapper for the animation. The animation name and json file name needs to be the same because by default it will look in the assets/js/anims folder (if you're not using custom file path method below).

Options

File

To define custom file path for the JSON animation

[data-blp-file="http://url.com/path/to/my/animation.json"]
  • Type: string/path
  • Default: http://example.com/assets/js/anims/animation-name.json

Images

Sometimes you have non-vector images in an exported animation,
images are stored inside an object with name and file path as properties.

[data-blp-images="{'Calque_0':'http://url.com/path/to/the/image/Calque_0.png','Calque_1':'http://url.com/path/to/the/image/Calque_1.png'}"]
  • Type: Object

Loop

To loop the animation

[data-blp-loop="false"]
  • Type: boolean
  • Default: false
  • Options: true/false

Autoplay

To autoplay the animation using differents triggers

[data-blp-autoplay="view"]
  • Type: boolean/string
  • Default: "view"
  • Options: true/false/view

Speed

To manage the speed of the animation (use negative value to play backwards)

[data-blp-speed="1"]
  • Type: integer
  • Default: 1

Lazyload

To lazyload the data json file.

[data-blp-lazyload="true"]
  • Type: boolean
  • Default: true
  • Options: true/false

Preserve Ratio

To preserve the aspect ratio of the animation

[data-blp-preserve-ratio="true"]
  • Type: boolean
  • Default: true
  • Options: true/false

Advanced Usage

BLP is also making a global variable in the DOM blplus to store all the animations instances of a page.

Example: type blplus in your console.

Useful if you need to tweak even more some animations, to use them as transition of a page for example, you might need to stop or play an animation at a specific time. You can do it like this in javascript:
blplus.my_transition_animation.instance.goToAndPlay(0)

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :)

History

  • 1.0 : Added 'loop', 'autoplay', 'file', 'speed', 'lazyload', 'images', 'preserve ratio' features.

Features to expect in the future:

  • Cache (to prevent loading multiple times the same file for differents animations instances)
  • More triggers (like click or hover on the wrapper animation for example)
  • WordPress plugin

Credits

  • DamChtlv

License

MIT Licence