Hi this is my website http://gallarii.appycodes.com/portfolio
I wan to built the effect like this example site: https://antoni.de/cases/
When user clicks on the thumb image the image must scale to full page and then load new page
can you give me hint how to proceed.
My js file : http://gallarii.appycodes.com/wp-content/themes/generatepress/bbc-working.js?ver=4.9.8
var PortFolioTransition = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.enlargeThumb()])
.then(this.showNewPage.bind(this));
},
enlargeThumb: function() {
var deferred = Barba.Utils.deferred();
var thumbPosition = this.originalThumb.getBoundingClientRect();
// this.cloneThumb = this.originalThumb.cloneNode(true);
// this.cloneThumb.style.position = 'absolute';
// this.cloneThumb.style.top = thumbPosition.top + 'px';
// this.oldContainer.appendChild(this.cloneThumb);
var image = $(this.originalThumb).find("img");
var tl = new TimelineLite({onComplete:deferred.resolve()});
tl
.timeScale(0.2)
.set(image , {
autoAlpha: 1,
"z-index":"9999999"
})
.fromTo(image,1,
{
scale: 1,
}, {
scale:5,
top:0
})
return deferred.promise;
},
showNewPage: function() {
var TTLite = new TimelineLite({
onCompleteScope: this,
onComplete: function() {
this.done() , afterDomReloaded()
}
});
TTLite.set([this.oldContainer, this.newContainer], {
position: "absolute",
top: 0,
left: 0,
width: "100%"
}).set(this.oldContainer, {
autoAlpha: 0
}).set(this.newContainer, {
autoAlpha: 1
}).set(this.newContainer, {
clearProps: "position, top, left, width"
})
}
});
Please help me if , Thanks or give me some info how to start