Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including preact-motion with all npm packages installed. Try it out:

var preactMotion = require("preact-motion")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

preact-motion v1.2.0

A fork of React-Motion to be used with Preact.

Deprecation warning

Most of the changes are now present in react-motion. Just use preact-compat and everything should work out of the box. This module won't be maintained anymore.

Preact-Motion

Build Status

This is a fork of the well known React-Motion library customized to support Preact out of the box.

Please see the React-Motion documentation for usage instructions.

About this fork

Goals

  • Be compatible out of the box with Preact 8 and upper. No preact-compat requirement. No react dependency.

  • Stay as close as possible to React-Motion, including:

    • same API ;
    • same developpers tools (flow, prop-types) ;
    • same tests and demos.
  • Better, smaller packaging:

    • expose a jsnext:main entry point ;
    • use Rollup to provide smaller packages ;
    • other tweaks to make production bundles smaller.

Versioning

Due to semver limitations, this package won't follow the React-Motion versioning, so it can make major version bumps without waiting for a major version bump upstream. See CHANGELOG.md for informations about supported React-Motion version.

Bundle size

The current production-ready bundle is about 4KB (minified+gzip). This has been achieved by using Rollup instead of Webpack, and removing prop-types declarations and dependency.

Install

  • Npm: npm install --save preact-motion

The NPM package requires process.env.NODE_ENV to be defined, so you should look at stuff like webpack DefinePlugin or rollup-plugin-replace to be able to use it in a browser.

  • 1998 Script Tag:
<script src="https://unpkg.com/preact-motion/build/preact-motion.prod.js"></script>
(Module exposed as `PreactMotion`)

Demos

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free