https://github.com/zr00da/morph-translate
Animate HTML elements between independent views
https://github.com/zr00da/morph-translate
animate dom effects elements morph transform translate transport ui
Last synced: 12 months ago
JSON representation
Animate HTML elements between independent views
- Host: GitHub
- URL: https://github.com/zr00da/morph-translate
- Owner: zr00da
- Created: 2017-04-24T11:08:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-02T17:30:55.000Z (almost 9 years ago)
- Last Synced: 2025-02-18T09:21:29.280Z (12 months ago)
- Topics: animate, dom, effects, elements, morph, transform, translate, transport, ui
- Language: JavaScript
- Homepage:
- Size: 3.09 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# morph-translate
`morphTranslate(sourceNodes, targetNodes, { options })`
- usable for complex effects where some elements persist between independent views
- operates directly in the DOM, independent of your implementation or framework
- source and target elements should have the same node structure, otherwise results may vary
- use the morph option if the target element is not designed 1:1 to source (generally slower, some properties force reflow)
- use stagger to progressively delay the animation for each member when using multiple sources and targets
- The effect should plug-in well in tandem with most animation systems that transition between views while keeping them both in the DOM (ngAnimate, ReactCSSTransitionGroup, ...)
- **Tip** If the target element isn't inserted in the DOM in it's final position when the transport function runs (you might be hiding it offscreen for other animation purposes), the transition will break visually. To work around this, position the target element hidden in it's final position in the first few frames of a keyframe animation or pre-`.enter` state so the translate function gets correct final data and then continue your own animation/transition
### Options
`morph` - attempt to morph source into target (`false`)
`morphChildren` - if morph, also morph source children into target children (`true`)
`morphProps` - properties to transition during a morph ([Array](https://github.com/mystrdat/morph-translate/blob/master/src/index.js#L9))
`duration` - animation duration in ms (`500`)
`easing` - animation easing (`'ease-in-out'`)
`stagger` - animation delay between subsequent members in ms (`30`)
`zIndex` - zIndex value of the animated clones (`1000`)
`willChange` - set `will-change` for all morphProps on each clone node (`false`)
`hideSource` - hide source element during animation (`true`)
`hideTarget` - hide target element during animation (`true`)
`removeClonesAfter` - remove clones after animation (`true`)
`callback` - function to call after animation is done
`log` - logging to console (`false`)
### Technical
What is happening?
1. Styled clones of the source elements are created in `document.body` and positioned over the originals
2. Source originals and target elements are hidden using `visibility: hidden`
3. Target bounds and styles are calculated
* Source clones are translated to target offset using CSS transform transitions
* (**morph**) All relevant properties on source and its children are transitioned into target calculated properties
4. Transition finishes, clones are removed and target elements are revealed using `visibility: visible`, callbacks fire