@smotion/core v1.0.1

@smotion/core

Concise aliases for Framer Motion components like motion.div, motion.span, and more.

A lightweight utility that gives you shorter JSX syntax when using Framer Motion.

Why?

Instead of writing:

import { motion } from "framer-motion";

<motion.div animate={{ opacity: 1 }} />;

You can simply write:

import { M } from "@smotion/core";

<M.div animate={{ opacity: 1 }} />;

Installation

npm install @smotion/core

or with Yarn:

yarn add @smotion/core

Note: framer-motion is a peer dependency and must be installed in your project.

npm install framer-motion

Usage

import { M } from "@smotion/core";

<M.div
  animate={{ opacity: 1 }}
  initial={{ opacity: 0 }}
  transition={{ duration: 0.5 }}
>
  Hello world
</M.div>;

Supported elements:

• M.div
• M.span
• M.section
• M.article
• M.main
• M.nav
• etc.

You can extend the list if needed by modifying the source.

Development

Clone the repo and build:

npm install
npm run build

License

MIT — Jérôme Albrecht