Estoy usando un script que encontré en línea que controla las transiciones de página usando GSAP (Greensock).

No soy un experto, pero he seguido algunos tutoriales, así que entiendo la parte GSAP.

Mi problema es que este script alterna las transiciones de 2 páginas: haga clic en el botón 1 y la página 2 se anima a la vista. Ahora haga clic en el botón 2 y la página uno regresa.

Estoy tratando de extender este script para incluir páginas adicionales (con botones adicionales). Lo he intentado un par de veces, pero hasta ahora no estoy llegando a ninguna parte.

El script que estoy usando es:

 var btns = document.querySelectorAll('.jsBtn'); var duration = .8; var isAnimating = false; addEventListenerList(btns, 'click', function (e) { if(!isAnimating) { switchPages(e.currentTarget.dataset.out, e.currentTarget.dataset.in); } }); function switchPages(outFn, inFn) { isAnimating = true; window[outFn](document.querySelector('.current')); window[inFn](document.querySelector('.jsPage:not(.current)')); } function scaleDown(el) { addClass(el, 'current'); TweenLite.fromTo(el, duration, { opacity: 1, scale: 1 }, { opacity: 0, scale: .8, clearProps: 'opacity, scale', onComplete: function () { removeClass(el, ['top', 'current']); } }); } function moveFromRight(el) { addClass(el, ['top', 'current']); TweenLite.fromTo(el, duration, { xPercent: 100 }, { xPercent: 0, clearProps: 'xPercent', onComplete: function () { removeClass(el, 'top'); isAnimating = false; } }); } // utils function addClass(el, className) { [].concat(className).forEach(function (n) { el.classList.add(n); }); } function removeClass(el, className) { [].concat(className).forEach(function (n) { el.classList.remove(n); }); } function addEventListenerList(list, event, fn) { for (var i = 0, len = list.length; i < len; i++) { list[i].addEventListener(event, fn, false); } }

El HTML que estoy usando es el siguiente. He insertado una tercera página (y un tercer botón) pero no puedo hacer que la secuencia de comandos reconozca este botón y active la transición correspondiente:

 <div class="page p1 current jsPage"> <button class="btn1 jsBtn" data-out="scaleDown" data-in="moveFromRight">One</button> </div> <div class="page p2 jsPage"> <button class="btn2 two jsBtn" data-out="scaleDown" data-in="moveFromRight">Two</button> </div> <div class="page p3 jsPage"> <button class="btn3 three jsBtn" data-out="scaleDown" data-in="moveFromRight">Two</button> </div>

Con la esperanza de que alguien pueda mostrarme cómo reescribir/extender este script.

Gracias.