getAutoAnimatePairs()

in js/controllers/autoanimate.js [456:521]


	getAutoAnimatePairs( fromSlide, toSlide ) {

		let pairs = [];

		const codeNodes = 'pre';
		const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
		const mediaNodes = 'img, video, iframe';

		// Explicit matches via data-id
		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
			return node.nodeName + ':::' + node.getAttribute( 'data-id' );
		} );

		// Text
		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
			return node.nodeName + ':::' + node.innerText;
		} );

		// Media
		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {
			return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );
		} );

		// Code
		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
			return node.nodeName + ':::' + node.innerText;
		} );

		pairs.forEach( pair => {
			// Disable scale transformations on text nodes, we transition
			// each individual text property instead
			if( matches( pair.from, textNodes ) ) {
				pair.options = { scale: false };
			}
			// Animate individual lines of code
			else if( matches( pair.from, codeNodes ) ) {

				// Transition the code block's width and height instead of scaling
				// to prevent its content from being squished
				pair.options = { scale: false, styles: [ 'width', 'height' ] };

				// Lines of code
				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {
					return node.textContent;
				}, {
					scale: false,
					styles: [],
					measure: this.getLocalBoundingBox.bind( this )
				} );

				// Line numbers
				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
					return node.getAttribute( 'data-line-number' );
				}, {
					scale: false,
					styles: [ 'width' ],
					measure: this.getLocalBoundingBox.bind( this )
				} );

			}

		}, this );

		return pairs;

	}