syncPages() {

		const config = this.Reveal.getConfig();

		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
		const scale = this.Reveal.getScale();
		const useCompactLayout = config.scrollLayout === 'compact';

		const viewportHeight = this.viewportElement.offsetHeight;
		const compactHeight = slideSize.height * scale;
		const pageHeight = useCompactLayout ? compactHeight : viewportHeight;

		// The height that needs to be scrolled between scroll triggers
		this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;

		this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
		this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';

		// This will hold all scroll triggers used to show/hide slides
		this.slideTriggers = [];

		const pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) );

		this.pages = pageElements.map( pageElement => {
			const page = this.createPage({
				pageElement,
				slideElement: pageElement.querySelector( 'section' ),
				stickyElement: pageElement.querySelector( '.scroll-page-sticky' ),
				contentElement: pageElement.querySelector( '.scroll-page-content' ),
				backgroundElement: pageElement.querySelector( '.slide-background' ),
				autoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ),
				autoAnimatePages: []
			});

			page.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' );

			this.slideTriggers.push({
				page: page,
				activate: () => this.activatePage( page ),
				deactivate: () => this.deactivatePage( page )
			});

			// Create scroll triggers that show/hide fragments
			this.createFragmentTriggersForPage( page );

			// Create scroll triggers for triggering auto-animate steps
			if( page.autoAnimateElements.length > 0 ) {
				this.createAutoAnimateTriggersForPage( page );
			}

			let totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 );

			// Each auto-animate step may include its own scroll triggers
			// for fragments, ensure we count those as well
			totalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => {
				return total + Math.max( page.scrollTriggers.length - 1, 0 );
			}, page.autoAnimatePages.length );

			// Clean up from previous renders
			page.pageElement.querySelectorAll( '.scroll-snap-point' ).forEach( el => el.remove() );

			// Create snap points for all scroll triggers
			// - Can't be absolute in FF
			// - Can't be 0-height in Safari
			// - Can't use snap-align on parent in Safari because then
			//   inner triggers won't work
			for( let i = 0; i < totalScrollTriggerCount + 1; i++ ) {
				const triggerStick = document.createElement( 'div' );
				triggerStick.className = 'scroll-snap-point';
				triggerStick.style.height = this.scrollTriggerHeight + 'px';
				triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';
				page.pageElement.appendChild( triggerStick );

				if( i === 0 ) {
					triggerStick.style.marginTop = -this.scrollTriggerHeight + 'px';
				}
			}

			// In the compact layout, only slides with scroll triggers cover the
			// full viewport height. This helps avoid empty gaps before or after
			// a sticky slide.
			if( useCompactLayout && page.scrollTriggers.length > 0 ) {
				page.pageHeight = viewportHeight;
				page.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' );
			}
			else {
				page.pageHeight = pageHeight;
				page.pageElement.style.removeProperty( '--page-height' );
			}

			// Add scroll padding based on how many scroll triggers we have
			page.scrollPadding = this.scrollTriggerHeight * totalScrollTriggerCount;

			// The total height including scrollable space
			page.totalHeight = page.pageHeight + page.scrollPadding;

			// This is used to pad the height of our page in CSS
			page.pageElement.style.setProperty( '--page-scroll-padding', page.scrollPadding + 'px' );

			// If this is a sticky page, stick it to the vertical center
			if( totalScrollTriggerCount > 0 ) {
				page.stickyElement.style.position = 'sticky';
				page.stickyElement.style.top = Math.max( ( viewportHeight - page.pageHeight ) / 2, 0 ) + 'px';
			}
			else {
				page.stickyElement.style.position = 'relative';
				page.pageElement.style.scrollSnapAlign = page.pageHeight < viewportHeight ? 'center' : 'start';
			}

			return page;
		} );

		this.setTriggerRanges();

		/*
		console.log(this.slideTriggers.map( t => {
			return {
				range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,
				triggers: t.page.scrollTriggers.map( t => {
					return `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`
				}).join( ', ' ),
			}
		}))
		*/

		this.viewportElement.setAttribute( 'data-scrollbar', config.scrollProgress );

		if( config.scrollProgress && this.totalScrollTriggerCount > 1 ) {
			// Create the progress bar if it doesn't already exist
			if( !this.progressBar ) this.createProgressBar();

			this.syncProgressBar();
		}
		else {
			this.removeProgressBar();
		}

	}
Updates our pages to match the latest configuration and
presentation size.