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)
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