Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lit-labs/motion

Package Overview
Dependencies
Maintainers
11
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lit-labs/motion

Lit directives for making things move.

  • 1.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.4K
increased by3.39%
Maintainers
11
Weekly downloads
 
Created
Source

@lit-labs/motion

Lit directives for making things move.

Installation

From inside your project folder, run:

$ npm install @lit-labs/motion

Animate directive

The animate directive can be used to animate DOM elements from one lit render to the next. If the animate element changes state between renders, the directive performs a "tweening" animation between the two states based on the options given. In addition, elements can animate when they initially render to DOM and when they are removed.

The directive supports a number of options:

OptionUsage
keyframeOptionsconfigure animation via the KeyframeEffect Options from the Web Animation API.
propertieslist of properties to animate, defaults to ['left', 'top','width', 'height', 'opacity', 'color', 'background']
disableddisables animation
guardfunction producing values that must change for the animate to run
inkeyframes to use when animating in
outkeyframes to use when animating out
skipInitialskip animating in the first time
idused to link to other animate's via inId
inIdid of the animate to render from when animating in
onStartrun when the animate starts
onCompleterun when the animate completes
onFramesrun when the frames are produced, use to modify frames

How it works

The directive uses the FLIP animation technique--derived from First, Last, Invert, Play. This describes how the directive works. It measures the styling of the animate element before a layout change (first) and after a layout change (last). Then it inverts the last layout such that it matches the first layout. Finally it plays an animation which removes the inverted layout such that the element animates to the "last" layout. See the FLIP article by Paul Lewis for more information about the technique.

The directive uses a reactive controller to coordinate measuring the DOM of the animate element. The first layout is measured when the hosting element updates, and the last layout is measured when the hosting element renders and completes its update.

Usage

Here's an example:

import {animate} from '@lit-labs/motion';
// ...

class MyElement extends LitElement {
  static properties = {shifted: {}};
  static styles = css`
    .box {
      position: absolute;
      width: 100px;
      height: 100px;
      background: steelblue;
      top: 100px;
      border-radius: 50%;
    }

    .shifted {
      right: 0;
    }
  `;

  render() {
    return html`
      <button @click=${this._toggle}>Move</button>
      <div class="box ${this.shifted ? 'shifted' : ''}" ${animate()}></div>
    `;
  }

  _toggle() {
    this.shifted = !this.shifted;
  }
}

AnimateController

The animate controller allows you to coordinate and control animate directives within a given element.

The controller constructor takes an options object with the following properties:

PropertyUsage
defaultOptionsdefault options for all element animate directives
startPausedall element animations start paused
disableddisables all element animations
onCompleterun when all element animations complete for a given update

The animate controller also provides API for controlling animate animations, including play(), pause(), cancel(), finish(), and togglePlay(). These methods affect all the animate animations for a given element. Finally, animate controller has properties which reflect the state of the animate animations in the host element: isPlaying returns true if any animate's are currently playing; isAnimating returns true if any animates currently have animations (which may be paused).

Contributing

Please see CONTRIBUTING.md.

FAQs

Package last updated on 31 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc