Search the Community
Showing results for tags 'barba'.
Found 3 results
-
Hello im trying to get my barba.js to work and animate to different pages. When it goes to the second page it doesnt do anything. None of the buttons work either. Also I tried uploading to codepen but im not sure how to do multiple pages on there. here it is live and and git hub code -
Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })
-
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
