element-motion - GitLite

KO | EN

gitlite — search

#python #typescript #llm #golang #java #awesome #cli #kubernetes #awesome-list #security #pytorch #mcp #ios #openai

element-motion

(★ 804)

Tween between view states with declarative zero configuration element motions for React

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- config.js
- webpack.config.js
- settings.json
- - .npmignore
  - .size-limit.js
  - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.json
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.json
- - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.json
- - .npmignore
  - .size-limit.js
  - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.json
- - .npmignore
  - .size-limit.js
  - CHANGELOG.md
  - package.json
  - README.md
  - tsconfig.json
- tsconfig.json
- tsconfig.options.json
- setup.js
.editorconfig
.eslintignore
.eslintrc
.gitignore
.nvmrc
.prettierrc
.travis.yml
.yarnrc
CHANGELOG.md
doczrc.js
lerna.json
LICENSE
netlify.toml
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/itsdouges/element-motion

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd element-motion

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install @element-motion/core --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add @element-motion/core

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Element Motion

This has been archived.
If you're looking for a solid implementation of an animation engine/FLIP style animations that are easy to use I highly recommend checking out Framer Motion.

The latest update with the `animate` prop truly is the nail in the coffin for Element Motion - it does everything this library does and more with a fantastic API.

Check it out here: https://www.framer.com/motion/

---

Tween between view states with declarative zero configuration element motions for [React](https://reactjs.org/).

[![npm](https://img.shields.io/npm/v/@element-motion/core.svg)](https://www.npmjs.com/package/@element-motion/core) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/@element-motion/core)](https://bundlephobia.com/result?p=@element-motion/core)

<a href="https://elementmotion.com/getting-started#moving-from-a-persisted-element"><img src="https://user-images.githubusercontent.com/6801309/57364146-eff7c800-71c5-11e9-9ddd-98ec510a6002.gif" height="500" alt="Moving from a persisted element" /></a>
<a href="https://elementmotion.com/getting-started#moving-to-another-distinct-element"><img src="https://user-images.githubusercontent.com/6801309/57364968-88db1300-71c7-11e9-8a51-b45b45eb64ab.gif" height="500" alt="Moving to another distinct element" /></a>
<a href="https://elementmotion.com/advanced-usage#moving-using-a-focal-target"><img src="https://user-images.githubusercontent.com/6801309/57364297-3cdb9e80-71c6-11e9-9a5f-e69ad9a7184b.gif" height="500" alt="Moving using a focal target" /></a>

Dynamic motions as easy as:

```js
<Motion triggerSelfKey={isLarge}>
  <Scale>{motion => <div {...motion} className={isLarge ? 'large' : 'small'} />}</Scale>
</Motion>
```

## Get started

Check out our [example motions](https://elementmotion.com) and then once you're done have a [look at the docs](https://elementmotion.com/getting-started).

### Installation

Element Motion requires React 16.4 or greater.

```bash
npm install @element-motion/core --save
```

or

```bash
yarn add @element-motion/core
```

### Whats in a motion?

There are two halves to Element Motion:

- [**Orchestration**](https://elementmotion.com/motion) (collecting DOM data, enabling motion between disconnected React elements, executing motions)
- [**Motions**](https://elementmotion.com/custom-motions) (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)

### Next steps

- **First time** here? After installing head over to [Getting started](https://elementmotion.com/getting-started) to start learning the basics
- Interested in **elements in motion**? Check out [Focal motions](https://elementmotion.com/focal-motions)
- For **ready made experiences** check out [Composite experiences](https://elementmotion.com/composite-experiences), just grab them and go!
- Having **trouble**? Maybe [Troubleshooting](https://elementmotion.com/troubleshooting) has your answers

## Talks

<a href="https://www.icloud.com/keynote/0ryFt4ce-WLXBwwOttgI9SbMA#element-motion-react-sydney"><img width="250" height="140" alt="Element Motion @ React Sydney 3rd June 2019 Slides" src="https://user-images.githubusercontent.com/6801309/58944241-bade9580-87c4-11e9-99f1-435943e7fa14.png"></a>
<br /><a href="https://www.meetup.com/React-Sydney/events/261817672/"><strong>React Sydney</strong> - 3rd June 2019</a>