Search the Community

Hello, Friends on the GSAP Forum, since there is a rollout of a hook `useGSAP()` working with the react/next. I wanted to know whats the smart and easiest way to create page transitions for the next.js using GSAP ofcourse. I've asked about this question to some of the people i know and most of them prefer to go with Framer Motion here, as its basically meant for it only, but since I am a GSAP fan, I want to know how i can achieve this with GSAP on Next.js, i hope with the simple straightforward guidance i can able to achieve this successfully!

Hi, Can anyone give suggestions for making perfect smooth page transitions using gsap in next js? Right now I have achieved it but when it is slow network speed it doesn't work as expected. The initial page exit (fade out) happens and there will be a delay to load new page, meanwhile current page fades out and fades in. What I actually want is current page should fade out and then route should change to new page then the new page should fade in.

Hi all- When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white. How can achieve this effect with a different logo that's shaped like a triangle of 3 sections (image below)? Reference website: https://www.cahnwilson.com/ Thank, - Martyn

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