src/js/animations/Transition.js
// TODO: be able to fade both views in/out while the transitioning text is cloned and out of the fading elements
be able to fade both views in/out while the transitioning text is cloned and out of the fading elements
be able to fade both views in / out while the transitioning text is cloned and out of the fading elements
async transitionTextNodes(source, target, nodeToAnimate = 'clone') {
		var fromBbox = source.getBoundingClientRect()
		var toBbox = target.getBoundingClientRect()
		let shouldClone = nodeToAnimate === 'clone'
		let clone
		if (shouldClone) {
			clone = cloneNode(source)
			Object.assign(clone.style, {
				position: 'absolute',
				zIndex: ZINDEX_CLONE_OVERLAY_TEXT,
				top: fromBbox.top + 'px',
				left: fromBbox.left + 'px',
			})
			if (localStorage.debugAnimations === 'true') clone.style.outline = '1px solid red'
			cloneContainer.appendChild(clone)
		}
		source.style.visibility = 'hidden'
		target.style.visibility = 'hidden'
		var props = ['color', 'fontSize', 'fontWeight', 'letterSpacing', 'opacity']
		var keyframes = this.calculateDiffKeyframes(source, target, props)
		keyframes.transformOrigin = ['top left', 'top left']
		var translateX = toBbox.left - fromBbox.left
		var translateY = toBbox.top - fromBbox.top
		keyframes.width = [
			(source.offsetWidth + 5) + 'px',
			(target.offsetWidth + 5) + 'px'
		]
		keyframes.transform = [
			`translate(0, 0) ` + (source.style.transform || ''),
			`translate(${translateX}px, ${translateY}px) ` + (target.style.transform || ''),
		]
		source.style.visibility = 'hidden'
		target.style.visibility = 'hidden'
		if (shouldClone)
			this.schedule(clone, keyframes)
		await this.finished
		if (shouldClone) {
			console.log('hiding clone text')
			source.style.visibility = ''
			target.style.visibility = ''
			clone.remove()
		}
	}
async transitionTextNodes ( source , target , nodeToAnimate = 'clone' ) { var fromBbox = source . getBoundingClientRect ( ) var toBbox = target . getBoundingClientRect ( ) let shouldClone = nodeToAnimate === 'clone' let clone if ( shouldClone ) { clone = cloneNode ( source ) Object . assign ( clone . style , { position : 'absolute' , zIndex : ZINDEX_CLONE_OVERLAY_TEXT , top : fromBbox . top + 'px' , left : fromBbox . left + 'px' , } ) if ( localStorage . debugAnimations === 'true' ) clone . style . outline = '1px solid red' cloneContainer . appendChild ( clone ) } source . style . visibility = 'hidden' target . style . visibility = 'hidden' var props = [ 'color' , 'fontSize' , 'fontWeight' , 'letterSpacing' , 'opacity' ] var keyframes = this . calculateDiffKeyframes ( source , target , props ) keyframes . transformOrigin = [ 'top left' , 'top left' ] var translateX = toBbox . left - fromBbox . left var translateY = toBbox . top - fromBbox . top keyframes . width = [ ( source . offsetWidth + 5 ) + 'px' , ( target . offsetWidth + 5 ) + 'px' ] keyframes . transform = [ ` ` + ( source . style . transform || '' ) , ` ${ translateX } ${ translateY } ` + ( target . style . transform || '' ) , ] source . style . visibility = 'hidden' target . style . visibility = 'hidden' if ( shouldClone ) this . schedule ( clone , keyframes ) await this . finished if ( shouldClone ) { console . log ( 'hiding clone text' ) source . style . visibility = '' target . style . visibility = '' clone . remove ( ) } }
TODO: be able to fade both views in/out while the transitioning text is cloned and out of the fading elements
TODO : be able to fade both views in / out while the transitioning text is cloned and out of the fading elements
//this.newView.appendChild(clone) // NOTE: 5px is a safeguard around start/end of the animation becase // things like font-weight can jump-change the layour and cause text // to break into multiple lines (repeatedly and cause jitter)  // TODO: use this for distance based duration calculations // e.g. the more pixels to travel, the more time it should animate. //var distance = getTravelDistance(translateX, translateY) // TODO: implement this 