I'm using a script I found online which controls page transitions using GSAP (Greensock).

I'm no expert but I've followed some tutorials soI kinda get the GSAP part.

My problem is this script toggles 2 page transitions - click on button 1 and page 2 animates into view. Now click on button 2 and page one returns.

I'm trying to extend this script to include extra pages (with extra buttons). I've tried a few times but so far I'm getting nowhere.

The script I'm using is:

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

The HTML I'm using is as follows. I have inserted a third page (and third button) but cannot get the script to recognise this button and trigger the relevant transition:

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

Hoping someone can show me how to rewrite/extend this script.

Thanks.

CodePudding user response：

switchPages function is probably where you want to make changes.

here is an example:

function switchPages(outFn, inFn) {
  isAnimating = true;
  var currentPage = document.querySelector('.current'); // get current page
  var nextPage = currentPage.nextElementSibling; // get next page, assuming identical html structure
  if (!nextPage.classList.contains('jsPage')) nextPage = document.querySelector('.jsPage'); // if next element is not a page, get first page
  window[outFn](currentPage); // does it need to be global?
  window[inFn](nextPage); // does it need to be global?
}