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