Search the Community

Hi, (stack : Next JS) i'm close to achieve an effect but am stuck! Here is the result of where i am for now : https://youtu.be/tXUPHLRPiDA As you can see, I'd like to make a transition on clicking to a project thumbnail. Problem : I don't want the container to scaleY up, but i want to keep the infos/image inside to a normal ratio. I tied to animate height, instead of scaleY, but then I have to also animation the scrollTo, and it was a bit messy... Here is the ProjectThumb component (I do have a project list with several ProjectThumb) : import React, { useRef, useState } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { lineAnimation, projectContainerAnimation, scrollAnimation, subtitleAnimation, titleAnimation, } from "../animations/animations"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Image from "next/image"; import { useRouter } from "next/navigation"; gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollToPlugin); const ProjectThumb = ({ project, setClicked, clicked, }: { project: any; setClicked: React.Dispatch<React.SetStateAction<number | null>>; clicked: number | null; }) => { const lineRef = useRef<HTMLDivElement>(null); const thumbContainerRef = useRef<HTMLDivElement>(null); const titleRef = useRef(null); const subTitleRef = useRef(null); const imageRef = useRef(null); const router = useRouter(); const [timeline, setTimeline] = useState<any>(); const [timeline2, setTimeline2] = useState<any>(); // set line animation timeline up useGSAP(() => { if (lineRef.current) { const tl2 = gsap.timeline({ scrollTrigger: { trigger: lineRef.current, start: "top 85%", toggleActions: "play end resume reverse", }, }); tl2.add(lineAnimation(lineRef)); setTimeline2(tl2); } }, [lineRef]); // Set project elements timeline up useGSAP(() => { const tl = gsap.timeline(); setTimeline(tl); // show off all project container but the one clicked if (clicked && clicked !== project.id && thumbContainerRef.current) { timeline.to( thumbContainerRef.current, { opacity: 0, duration: 0.5, }, `<${Math.abs((clicked - project.id) * 0.5) / 3}` ); } }, [clicked, thumbContainerRef]); const handlePlayAnimation = () => { if ( thumbContainerRef.current && subTitleRef.current && titleRef.current && timeline2 && timeline ) { setClicked(project.id); timeline2.clear(); timeline2.to(lineRef.current, { scaleX: 0, duration: 0.5, }); const offset = window.innerHeight * 0.5 - thumbContainerRef.current.getBoundingClientRect().height / 2 - 32; const thumbContainerScale = window.innerHeight / thumbContainerRef.current.getBoundingClientRect().height; timeline .add(scrollAnimation(thumbContainerRef, offset)) .add(titleAnimation(titleRef), "-=0.4") .add(subtitleAnimation(subTitleRef), "-=0.25") .add( projectContainerAnimation(thumbContainerRef, thumbContainerScale), "<=0.3" ); // .then(() => router.push(`/projects/${project.id}`)); } }; return ( <div className={`project_container_${project.id} overflow-hidden min-h-[25vh] relative`} ref={thumbContainerRef} > <div ref={lineRef} className="projectLine scale-x-0 h-2 bg-slate-500 opacity-100" ></div> <div onClick={handlePlayAnimation} className="project_infos button absolute w-full h-full z-10 cursor-pointer" > <div></div> <div className="project_title flex gap-4 p-8 items-end text-white" key={project.id} > <h3 ref={titleRef} className="project_title text-2xl w-full text-slate-800" > {project.title} </h3> <p ref={subTitleRef} className="project_subtitle w-full text-slate-800" > {project.subtitle} </p> </div> </div> <Image ref={imageRef} src={project.images.thumbnail} width={1920} height={1080} alt={project.title} className="h-full object-cover aspect-square opacity-30 absolute" /> </div> ); }; export default ProjectThumb; And here are the animations called by the previous component : import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollToPlugin); export const lineAnimation = (ref: any) => { return gsap.to(ref.current, { scaleX: 1, transformOrigin: "left", duration: 0.75, }); }; export const thumbContainerAnimation = (ref: any) => { return gsap.to(ref.current, { height: "100vh", transformOrigin: "top center", duration: 1, ease: "expo.in", }); }; export const scrollAnimation = (ref: any, offset: number) => { return gsap.to(window, { duration: 0.75, scrollTo: { y: ref.current, offsetY: offset }, ease: "expo.inOut", }); }; export const titleAnimation = (ref: any) => { return gsap.to(ref.current, { duration: 0.4, y: -50, opacity: 0, ease: "expo.in", }); }; export const subtitleAnimation = (ref: any) => { return gsap.to(ref.current, { duration: 0.35, y: -50, opacity: 0, ease: "expo.in", }); }; export const projectContainerAnimation = (ref: any, scale: number) => { return gsap.to(ref.current, { scaleY: scale, transformOrigin: "center", duration: 1.2, ease: "power4.inOut", }); };

Hi! If I switch pages within the same namespace, with a async page-transition in between, the delay time I assign to the timeline for this namespace doubles. This only happens when I switch between pages in the same namespace and not between pages in different namespaces. Does anyone have an idea how I can solve this? I appreciate any help you can provide. Thanks!

Hello there, Im trying to achieve a specific page transition using nuxt 3 and gsap. I saw the starter code of a simple page transition when you define a custom transition in a seprate file and import it in every page using definePageMeta function and the specify the pageTransition to the one you defined and it work, however i want a specific pattern. I'm going to explain my situation using tailwindcss What I'm trying to achieve is this: Make a page transition that have a div initially with 'absolute w-full h-full bg-black top-0 left-0 ' so this div is covering the hole page even the default layout. On onEnter i want to translateY by -100% so the page and the layout is visible. On onLeave set translateY by 100% then animate translateY by -100% ... This easely achievable using gsap However the implementation in nuxt 3 is hard i think, i couldn't do it because in the page transition if i the definePageMeta the el the return in the onEnter or onLeave is the root of the page ex: index.vue And if i add and another div in index.vue i got an error about the Transition component can't do animation if there is not one root element , i tried to make a seprate component for the transition and add this component inside every page however the animation did not triggered for the onEnter and onLeave methods when change routes using the NuxtLink component or use router.push('url'), i don't know where is the problem, if anyone knows how to do this, please help, Visit Dennis website and try to change routes you will understand what i want to achieve. And thank

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

Working on Nuxt3 Page Transtions and want to the scroll position to be retained on the .page-transition-leave-active element. Currently if you scroll down from the top position, navigate to a new route, the page snaps to the top position before routing. https://stackblitz.com/edit/nuxt-starter-ncqyhu?file=pages%2Findex.vue To recreate the issue in the Stackblitz Min Dem. 1.) Go to the "ScrollTrigger" Route. 2). Scroll to the bottom (Orange Section) 3.) Click on the Layers Section Route. The orange section will snap to the blue (first section on the page), then animate out. A couple of things to assist. I have added the below css to allow the entering and leaving "pages" to overlap, creating more of a seamless transition. So this may play a role. .page-transiton-enter-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; z-index:9; } .page-transiton-leave-active { position: fixed; height: 100%; width:100%; top:0; left:0; right:0; bottom:0; /* z-index:4; */ } I have also set the pageTransition mode property to null, this allows the enter/exit pages to be in the DOM at the same time const pageTransition = { name: 'page-transiton', // mode: '', onEnter: (el, done) => { Lastly, in my project I am using scrollSmoother, but was able to recreate the issue without S.M. Although, not sure if SM could be used as a tool to fix the issue. <template> <div id="smooth-wrapper" ref="wrapper"> <div id="smooth-content" ref="content"> </div> </div> Thanks in advance

Hey, this question is not directly related to GSAP but I thought you guys might have some good insight about this: I'm trying to create a page transition similar to this site: https://vucko.co/ but I struggle to find a way to make the page transition seamless so that the previous & next page are visible at the same time for a brief moment, this creates the effect that the page never changes while the next page is transitioning from bottom to top. My main problem is that when I create a javascript transition with Nuxt & GSAP the previous page has to go away before the next one even has a chance to be visible. I'm not an expert with page transitions so I might be missing something fundamental here. Here is a basic demo of a Nuxt transition setup I have been using: https://stackblitz.com/edit/nuxt-starter-lq1ckq?file=helpers%2FtransitionConfig.js

Hi Guys. This should be a very straight one. So i have this animation that uses scroll trigger and pinned the page. Pretty smooth with no issue. Check it out https://stackblitz.com/edit/circle-scroll-trigger?file=src%2FApp.js Now i have another project that uses React page transition. So i added the above animation to the scroll trigger page. Check it out here https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js The issue comes when i switch between pages and i tried to scroll down to the animation, It just disappeared. But if i refresh the page, everything works fine. I think the page transition is interfering with the scroll trigger animation. Appreciate all the help i can get. Thanks.

Hi Crew, I have slightly modified the existing stackblitz for Nuxt3/GSAP but simplifying the animation to one tween in and out for simplicity. Im trying to achieve a seamless side to side transition where effectively both the out animation and the in animation occur at the same time. I can achieve this effect with css only, but really want GSAP for the flexibility. I have tried playing around with the hooks, but cant get it to work. I think they hooks are right. https://stackblitz.com/edit/nuxt-starter-d3iqbd?file=helpers%2FtransitionConfig.js Thanks in advance.

Hi guys. Here is a starter code provided by GSAP team on Page Transition with NextJS https://stackblitz.com/edit/nextjs-13cw4u?file=components%2FTransition.js I however discovered that it doesn't work with NextJS app router but works with page router. In app router, the exiting route and the entering route is always the same thing. I will appreciate if someone can create a template for this page transition using App Router. Thanks

Good morning, I have smooth scroller active on a website, but it gets stuck after barba.js transitioning. I reviewed some older topics here, but even though I found many, I wasn't able to understand how to fix it. I understood that I need to "clean" and restart scrollSmoother/Trigger after transition, but then wasn't able to do it. This is my code. Could you please help? barba.init({ debug: true, sync: true, timeout: 10000, transitions: [{ name: 'opacity-transition', once(data) { document.addEventListener("DOMContentLoaded", function () { var tl = gsap.timeline(); tl .to(".transoverlay", { opacity: 0 }) .set(".transoverlay", { display: "none" }) .from('#masthead', { opacity: 0, y: 5 }, 4) .from('.fadein', { opacity: 0, y: 5 }); }); }, before(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .set(".pageTitle", { display: "none" }) .set(".transoverlay", { top: "-100vh", opacity: 1, display: "flex" }) .to(".transoverlay", { y: "100vh", opacity: 1, duration: 0.5 }) .to(".blslogo", { display: "block", opacity: 1, duration: 0.5 }) .to(data.current.container, { opacity: 0 }, 0.2) .to(".nextPage", { display: "block", opacity: 1, duration: 0.2 }) .to(window, { scrollTo: { y: 0 } }); }); }, beforeEnter(data) { return new Promise((resolve) => { const barbaNamespace = data.next.container.getAttribute('data-barba-namespace'); const pageTitle = document.getElementById('wipertitle'); pageTitle.innerHTML = barbaNamespace; const timeline = gsap.timeline({ onComplete: resolve }); timeline .set("#wipertitle", { display: "block" }) .from("#wipertitle", { opacity: 0, y: 5, duration: 0.5 }) .set("#wipertitle", { display: "block", onComplete: resolve }, -0.5); }); }, enter(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to(data.next.container, { opacity: 1 }); }); }, after(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to("#wipercontent", { opacity: 0, duration: 0.5 }) .to(".transoverlay", { y: "200vh", opacity: 0, duration: 0.5, display: "none" }) .set("#wipercontent", { opacity: 1 }) .set(".blslogo", { opacity: 0, display: "none" }); }); } }] });

I'm facing a specific issue with the page transition animation (GSAP + Barba) on my website. The problem is occurring only on mobile browsers such as Safari on iPhone and Chrome on mobile devices. Test flow: scroll down the home page to the section with the black background and click on either link: "Conoce el estudio" or "Contacta" Problem Description: When transitioning between two pages, I've implemented an effect where the current page slides out to the left and the new page comes in from the right. During this transition, I apply an instant translateY to the elements of the current page based on the scroll position and use scrollTo to ensure the new page appears at the top. The code I'm using is as follows: barba.hooks.beforeEnter((data) => { const currentContainer = data.current.container const scrolledPixels = window.scrollY * -1 gsap.set(currentContainer, {y: scrolledPixels}) window.scrollTo({top: 0, left: 0, behavior: 'instant'}); }); On desktop browsers, everything works perfectly. However, on mobile devices, I experience a brief "flickering" or flash with the text elements during the transition. Usually, images remain static as expected, but the text seems to re-render, causing a brief flash of the top of the page before snapping back to the desired position. Has anyone faced a similar problem or has any suggestions on how to solve it? Any guidance or direction would be greatly appreciated. What I've Tried: TranslateY it in plain JS Disable force3d to prevent hardware acceleration. Disabling any other simultaneous animations or transitions. Optimizing the CSS, adding will-change and checking properties related to text rendering. Using requestAnimationFrame to synchronize animations. Intercept native scroll behavior with ScrollTrigger.normalizeScroll(true) None of the above solutions has resolved the issue. I'm aware that the question may not be 100% related to GSAP, but I just hope to find someone who knows what the magic trick is.

Hi I'm working on page transition in Nuxt 3 with gsap, following this Stackblitz: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md Is it possible to wait the page leaves and then revert the context? Otherwise you see weird behavior, for example when you are on the Layer section page, you scroll to a pinned section and then you navigate to another page it should stay to that section and not jumping to the top. Thanks in advance for your help!

Hey, I have recently started to dig into Nuxt 3 javascript page transitions with gsap and I am unable to get this simple javascript fade transition to work properly. There must be something that I don't understand here since I'm assuming that the hooks & the animations are correctly setup to the transitionConfig.js but it still does not fade smoothly to the next page, the leave animation looks good but onEnter doesn't. I forked the Nuxt 3 page transition project on Stackblitz to match the setup in my local setup so I managed to reproduce the problem here: https://stackblitz.com/edit/nuxt-starter-sgqvct?file=helpers%2FtransitionConfig.js

Hello. Can anyone give advice on how to properly implement those animations presented on this site. https://mashroom.pro/ncracker/ I have three questions in particular: 1. How can I reduce the speed of the cards that fly from bottom to top of the scroll. 2. What are some approaches to properly implement a transition where a certain section is approached and becomes directly part of the screen, after which it scrolls freely and plays its animations. I have a problem that after the animation ends, the section jumps around (because I disable aspect-ratio and overflow: hidden). 3. Am I taking the right approach for animating product sections? I create a timeline for each section with a common scrolltrigger, in which I make a pin for the section, and then I add animations. p.s. demo - https://codepen.io/cno6/pen/VwqWjNz

Hey guys, I recently stumbled across https://anatoletouvron.fr/ 's portfolio. I really liked the page transition that was being used plus also realized he was making use of gsap for the same from a related article. This is the https://res.cloudinary.com/impower/video/upload/v1692899113/sample_yc3if0.mp4 transition video so as to specify which exact animation I'm talking about. I am new to gsap and would really love it, if you guys can guide me on how to go about this. Thank You

Subject: Seeking Help for Preloader Integration in GSAP Page Transitions Dear GSAP and Coding Wizards, I find myself facing a significant challenge while attempting to incorporate a preloader into the GSAP page transitions script that I've been crafting. Despite my best efforts, I've hit a roadblock and now I'm reaching out to you for your magical expertise to help me achieve my goal! ? My objective is to seamlessly fade in and out / start and end > the preloader logo alongside the initiation and conclusion of the GSAP page transitions. I hope my request is clear and resonates with you. https://codepen.io/Ren-Winther-the-styleful/pen/LYMEEZB Warmest regards, René

On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning

Hi there! This is a StackBlitz of a minimal demo showing two routes that I want to transition between: https://stackblitz.com/edit/sveltejs-kit-template-default-2zmrub?file=src%2Froutes%2F%2Blayout.svelte The transition should be a simple wipe from bottom to top – meaning the old page is wiping away and revealing the new page underneath. Sounds simple, but I'm struggling with implementation. Without the transition, everything works just fine. But when I work on the transition, I have the following problems: 1. During transition, Svelte puts the HTML of the new page next to the HTML of the old page. Since I am transitioning the <main> element, we have two <main> elements in the DOM for a short period of time. I want to keep the "old page" on top of everything. So I am using gsap.set to absolutely position the "old page" on top of everything and then animating the height property to reveal the "new page" underneath. Afterwards, Sveltekit unmounts the "old page". The positioning already works as you can see in the demo (after clicking the nav link, the "old page" stays there for 2 seconds before the new page becomes visible). But the wipe doesn't. If I am animating autoAlpha instead, it does work. 2. When I scroll down the page a bit and then clicking the link, the content is jumping up to the top of the page and then animating to the new page. Is this a Sveltekit behavior? Or GSAP? I tried window.scrollTo to the value of window.scrollY just before animating but that did not work (it did work without ScrollSmoother, though). 3. The SmoothScroll doesn't work after route change. Weirdly, this works on my local project which is setup the same way. 4. There is a gap at the end of the page and I don't know where it comes from. I should add that I got the transition working without SmoothScroller. And I got SmoothScroller working without the transition. Just together, everything falls apart. So my best guess is, it has something to do with absolutely positioning the elements, since SmoothScroller uses a fixed element as a wrapper. Pushing me in the right direction would already help me tremendously. I can then figure out the details. Thanks so much!

Hello, I'm new to using GSAP overall, and I'm trying to achieve page transitions similar to this website (Eugene Ling – Portfolio). Is there some examples here that I can use as a guide for my project? I'm using React.js.

https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md Bug: When I changed the URL quickly in the navigation header ( click many times fast ) I checked the reach Next.js version, and there is no bug.

Hi there! I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ I leave a minimal demo(thanks @GreenSock): https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro Thanks!

During page transition I want to scroll to top but ScrollSmoother is prevent window.ScrollTo behaviour instant. So the scrolling is always smooth.. I need going instantly to top. Any idea if this is desirable behaviour? Because when I disable ScrollSmoother everything works perfectly. Do I need to kill ScrollSmoother or pause it? When I read the docs, this should always work: // scroll to top window.scrollTo({ top: 0, behavior: 'instant' })

Sorry this project is too nascent to be published anywhere, so I am fishing for some more general guidance or advice, especially from anyone working in the contact of a React / Next.js implementation, as I suspect it is related to how things mount or are applied on the page transition of the parent, Layout.jsx. I 100% understand this isn't ideal, the not sharing of code or offering an example you can inspect, and I will do that if I don't give up on the idea before I get a test site up. I also really don't expect a solution, but as I am soon pulling my last hair out I thought I would show you the issue, explain what I've tried, and see if you can suggest anything else based on your past experiences. This is a screen recording that details the issue. https://www.icloud.com/sharedalbum/#B1253qWtHytDIK;B919597C-1871-4978-9E3A-5B9497D7626C The difficult part is it's not repeatable. Sometimes the ficker happens, sometimes it doesn't. I have tried a ton of different things in terms of restructuring the component, abstract different parts, applying delays, and CSS in JSX to set opacity to zero... I have also tried applying all the applicable will-change properties, and applied these to my h2 font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); transform: translateZ(0); So I am happy to answer more questions, and again, I know it's not ideal... I tried to migrate this to codesandbox but I had so many issues after spending 30 minutes with it I had to cut my losses and throw a Hail Mary here. Key components are AnimatedHeader.jsx and useSplitText.js import React, { useEffect } from "react"; import useSplitText from "../hooks/useSplitText"; import { gsap } from "gsap"; const AnimatedHeader = ({ headline }) => { const [isSplitTextLoaded, SplitText] = useSplitText(); useEffect(() => { if (isSplitTextLoaded) { const childSplit = new SplitText("h2", { type: "words", wordsClass: "split-child", }); const parentSplit = new SplitText("h2", { type: "words", wordsClass: "split-parent", }); gsap.from(childSplit.words, { duration: 1.25, delay: 0.3, autoAlpha: 0, yPercent: 50, ease: "back.out(1.2)", stagger: 0.03, }); } }, [isSplitTextLoaded]); return ( <> <h2 className="will-change-transform split-parent block overflow-hidden pb-2 text-6xl text-stone-700"> {headline} </h2> <style jsx>{` .split-parent, split-child { will-change: opacity, transform; } `}</style> </> ); }; export default AnimatedHeader; import { useState, useEffect } from 'react'; import { gsap } from "gsap"; let SplitText; const useSplitText = () => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const loadSplitText = async () => { SplitText = (await import('../src/scripts/SplitText.min.js')).default; gsap.registerPlugin(SplitText); setIsLoaded(true); }; if (!SplitText) { loadSplitText(); } else { setIsLoaded(true); } }, []); return [isLoaded, SplitText]; }; export default useSplitText; <AnimatedHeader/> is then imported and placed on individual pages as needed.

Hi there, I'm re discovering GSAP after 6 years, I'm trying to make an animation on a little website project, it's working great except that my page can be seen before the animation, I can't figure out why ? Any idea or help about it please ? Working with reactjs and vite js Here is my code: import { useRef, useEffect } from "react" import { Link } from "react-router-dom" import Champions from "../components/Champions" import { gsap, Power3, Power4 } from "gsap" import "../css/_frame.css" import "../css/_cards.css" const Home = props => { let screen = useRef(null); let body = useRef(null); useEffect(() => { var tl = new gsap.timeline(); tl.to(screen, { duration: 1.2, width: "100%", left: "0%", ease: Power3.easeInOut, }); tl.to(screen, { duration: 1, left: "100%", ease: Power3.easeInOut, }); tl.set(screen, { left: "-100%" }); gsap.to(body, {duration: 0.3}, { css: { opacity: "1", pointerEvents: "auto", ease: Power4.easeInOut } }).delay(0); return () => { gsap.to(body, {duration: 1}, { css: { opacity: "0", pointerEvents: 'none' } }); } }); return ( <> <div className="load-container"> <div className="load-screen" ref={(el) => (screen = el)}></div> </div> <div data-barba="container" className="home"> <div ref={(el) => (body = el)} className="Headd"> {Object.entries(props.originData).map((origin, key) => { return ( <div className="champions" key={key}> {Object.values(origin).map((champions) => { return Object.values(champions).map((champion, key) => { return ( champion.name && ( <Link to={"/" + origin[0] + "/" + champion.name} key={key}> <Champions champion={champion} /> </Link> ) ) }) })} </div> ) })} </div> </div> </> ) } export default Home What I get in the video. Many thanks to anyone who have read me gsap_issue.mp4

Is it possible to do a gsap Flip animation to do a page transition with ReactJs/NextJs ? I am struggling a little bit :p If yes can you maybe guide me on how to get started ?