https://github.com/ideasonpurpose/iop-motion
IOP's proprietary animation library
https://github.com/ideasonpurpose/iop-motion
animation intersectionobserver motion
Last synced: 11 months ago
JSON representation
IOP's proprietary animation library
- Host: GitHub
- URL: https://github.com/ideasonpurpose/iop-motion
- Owner: ideasonpurpose
- Created: 2022-02-01T14:04:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-12T12:56:57.000Z (almost 4 years ago)
- Last Synced: 2025-01-13T11:25:19.549Z (about 1 year ago)
- Topics: animation, intersectionobserver, motion
- Language: Nunjucks
- Homepage: https://ideasonpurpose.github.io/iop-motion/dist/
- Size: 70.3 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IOP Motion
Common animation library used at [Ideas On Purpose](https://www.ideasonpurpose.com/).
Read the [IOP Motion animation library guide](https://ideasonpurpose.github.io/iop-motion/dist/) for installation and examples.
## Getting Started
- `git clone https://github.com/ideasonpurpose/iop-motion.git .` - downloads a copy of this repository into the current terminal location.
- `npm install` - install project dependencies, then
- `npm run start` - start the development environment at [//localhost:8080](http://localhost:8080)
- `npm run build` - build the site for production delivery.
Edit the `src` directory.
Once finished, run `npm run build` and push changes.
## Quirks
If animations don't happen on page load properly (e.g. items are visible when they should be faded out), then most likely a CSS `transition` is overriding the library transitions. Fix it by wrapping the element in a new container and apply the motion effects on it instead.