Search the Community

Hi, The best course of action right now is to use React Transition Group as shown in this demo: https://stackblitz.com/edit/nextjs-13cw4u?file=Layouts%2FLayout.js,components%2FTransition.js,context%2FTransitionContext.js Due to the way this works, there is no need for the useGSAP hook in the transition component since those are one off animations that will be elegible for garbage collection after they're completed. Is necessary to point out that you have to use the pages router for this approach (animating in and out each page) since this is not possible with the app router regardless of the animation solution you use (Transition Group with either GSAP or CSS, Framer, etc). This is a known issue that hasn't been resolved in over a year by the Next team, nothing to do with GSAP, Framer or other libraries: https://github.com/vercel/next.js/discussions/42658 Here you can find a way to create overlay transitions (the pages are not animated, just an overlay animates over the layout) with GSAP using the app router: https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80 Finally you can stick with the pages router for simple static websites if you want to use the other way, there is nothing essentially wrong in using the pages router IMHO. Hopefully this helps. Happy Tweening!

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

Hi @christopherha and welcome to the GSAP Forums! I wouldn't call it a pattern soto speak, is more about the right tool for the right job. When animating routes (especially when you want to animate the entire page) the conundrum is to animate out the current route, unmount it when the animation is completed, then mount the page for the next route and finally animate that page in. Routing in these type of frameworks doesn't have a timing or anything of the sort to handle that. React Transition Group does that, that's why we use it. Unfortunately React hasn't pay attention to animations (unlike Angular, Vue and Svelte - just to mention three) so there is no way for developers to handle that directly with React, hence the solution has to come from third party libraries. There is no documentation on this particular subject because there is not a lot to document actually, it basically stems from my explanation above: Change route Animate current route out When animation out is complete, unmount current route Mount next route Animate next route in The demo you see is the simplest and most reliable way to handle all that, trust me, before Transition Group created the SwitchTransition component was even more convoluted and complicated. That's why (and I know this is not your case) when people are starting I recommend leaning towards either Vue or Svelte rather than React: Hopefully this clear things up. Happy Tweening!

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 am currently testing out GSAP with Next.js and i'm trying to create a zoom-in on scroll transition, where I use GSAP to zoom into the text, which is white, until it covers the screen, before ending up on the next section which has a white background. However, I can't seem to make it work. I've tried using useRef (the current code uses this) as well as just using class names. StackBlitz - Did a demo with the code in StackBlitz as well, for some reason, I have to open the demo in a separate page, scroll all the way down, then scroll all the way up for the text to show up... But except for that, the problems are the same, as the code is the same, except that I had to pin the textElement, instead of the heroElement to make it somewhat work, and with some other unnecessary components, and classes removed. The two problems I'm having are: 1. When scrolling, the text zooms in (or rather, scales up), however, at the same time the text moves up, out from view as shown in the gif below, which I don't want. 2. I'm trying to also make it zoom into a specific letter, because I think the transition would be smoother (although, this part is not necessary, if the text-zoom looks good and can cover the screen) I've looked around the forums, asked AI and tried myself for two weeks but I just can't figure it out. If anyone has an idea on how to fix this, or make it work that I would be really thankful!! Ps: the "hero_title" = @apply 2xl:text-[72px] sm:text-[64px] text-[50px] font-extrabold origin-center; 'use client' import React, {useRef, useEffect} from 'react' import HeroCanvas from './HeroCanvas' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { useGSAP } from '@gsap/react' gsap.registerPlugin(ScrollTrigger) const Hero = () => { const heroRef = useRef(null) const textRef = useRef(null) const letterRef = useRef(null) const container = useRef(null) useGSAP(() => { const heroElement = heroRef.current; const textElement = textRef.current; const letterElement = letterRef.current; const tl = gsap.timeline ({ scrollTrigger: { trigger: heroElement, start: 'top top', end: '+=5000', scrub: true, markers: true, pin: heroElement, } }); tl.fromTo (textElement, {scale: 1}, { scale: 100, ease: 'none', smoothOrigin: true, }); tl.fromTo (letterElement, {scale: 1}, { scale: 100, ease: 'none', smoothOrigin: true, }); }, {scope: container}) return ( <div ref={heroRef} className='flex min-h-screen flex-col justify-between p-24 items-center'> <div ref={textRef} className='flex-1 pt-36 padding-x'> <h1 className='hero_title uppercase tracking-widest text-center'> <span> Testi</span><span ref={letterRef}>n</span><span>g</span> <span className='bg-gradient-to-r from-accent-3 via-accent-2 to-accent-1 inline-block text-transparent bg-clip-text'> GSAP </span> <br /> <span> Placeholder </span> <span className='bg-gradient-to-r from-accent-3 via-accent-2 to-accent-1 inline-block text-transparent bg-clip-text'> Text </span> </h1> </div> <HeroCanvas /> </div> ) } export default Hero

It's a protection against scroll-behavior: smooth which messes things up. Some CSS libraries apply that, so we're overwriting it. In order for ScrollTrigger to do its magic, it must temporarily set the scroll position of the page back to the top (0), do all of its calculations and pre-optimize, and then restore the scroll position (it's invisible to the user), but if you apply scroll-behavior: smooth, that basically prevents that from working. It's sorta like setting a CSS transition to a value that GSAP animates - the CSS transition intercepts the value application and says "NOPE! I won't allow that right now...I'll drag it out over the course of a certain duration". In short, it's protecting you 😉

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 GSAP Community, I have built a react web app, These are the component list is: 1) Landing page 2) About Page 3) Traction 4) Services 5) Ecosystem 6) Partners I have used GSAP in all pages for their title reveal. In traction component i have added horizontal scroll. Now after this the scroll animations after that coponent are all altered. I saw that two pairs of markers were visible for the Partner component title reveal even though there was only one scroll trigger. So help me sort out this issue. Tractions.jsx import React, { useRef, useEffect } from 'react'; import './Traction.css'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import NorthEastIcon from '@mui/icons-material/NorthEast'; import { isMobile } from 'react-device-detect'; gsap.registerPlugin(ScrollTrigger); export default function Traction() { useEffect(() => { gsap.set('.cursor', { xPercent: -50, yPercent: -50 }); let cursor = document.querySelector('.cursor'); let hand = document.querySelector('.hand'); let subPanels = document.querySelectorAll('.sub-panel'); let mouseX; let mouseY; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; gsap.to(cursor, 0.5, { x: mouseX, y: mouseY }); }); subPanels.forEach(subPanel => { subPanel.addEventListener('mouseenter', () => { gsap.to(hand, 1, { scale: 1, opacity: 1, top: '-75px', left: '-75px', rotate: 0, ease: 'elastic.out(1, 0.3)', }); }); subPanel.addEventListener('mousemove', () => { gsap.to(hand, 1, { x: mouseX, y: mouseY, }); }); subPanel.addEventListener('mouseleave', () => { gsap.to(hand, 0.2, { scale: 0, opacity: 0, top: '10', left: '40', rotate: 45, }); }); }); }, []); const component = useRef(); const slider = useRef(); if (!isMobile) { console.log("Not a mobile") useEffect(() => { let ctx = gsap.context(() => { let panels = gsap.utils.toArray(".panel"); gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { trigger: slider.current, pin: true, scrub: 1, snap: 1 / (panels.length - 1), end: () => "+=" + slider.current.offsetWidth, } }); }, component.current); return () => ctx.revert(); },[]); } return ( <div className='pin'> <div className="traction" ref={component}> <div ref={slider} className="container"> <div className="cursor"></div> <div className="hand">View</div> <div className="panel"> <div className="sub-panel"> <div className='traction-content'> <h3> <span>21+ Universities</span> connected together in one community with equal opportunities to learn, connect and grow. </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> <div className="sub-panel"> <div className='traction-content'> <h3> <span>21+ Comrades</span> working together to make a difference. </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> </div> <div className="panel"> <div className="sub-panel"> <div className='traction-content'> <h3> <span>10+ Events</span> conducted to connect students, developers, job seekers to enrich their knowledge and skills. </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> <div className="sub-panel"> <div className='traction-content'> <h3> <span>4+ States</span> united together to establish blockchain clubs in universities, fostering web3 culture. </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> </div> <div className="panel"> <div className="sub-panel"> <div className='traction-content'> <h3> <span>1000+ Students</span> working together to build a effective web3 community. </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> <div className="sub-panel"> <div className='traction-content'> <h3> <span>Immense Expansion</span> of the Web3 ecosystem is ongoing... </h3> <h4> View stats <NorthEastIcon className="arrow" /> </h4> </div> </div> </div> </div> </div> </div> ); } Traction.css: .container { width: 300vw; height: 100vh; display: flex; flex-wrap: wrap; } .lastContainer { display: flex; height: 100vh; background-color: black; margin: 0; } .panel { width: 100vw; height: 100vh; color: var(--bg-color); background-color: black; display: flex; align-items: center; justify-content: space-around; } .sub-panel { height: 60%; width: 30%; border-radius: 30px; background-color: #2A2A39; padding: 4rem; color: #9DA7C4; cursor: pointer; } .sub-panel h3 { font-size: 1.4rem; line-height: 1.5; } .sub-panel h4 { font-size: 16px; margin: 1.33rem 0px; font-weight: bold; } .sub-panel span { color: white; } svg { vertical-align: 0; } .arrow { margin-bottom: -0.4rem; } .cursor, .hand { position: fixed; left: 0; border-radius: 50%; pointer-events: none; transition: transform .1s; } .cursor { z-index: 999; } .hand { background: rgb(155, 0, 255); top: 50%; width: 80px; height: 80px; z-index: 9999; display: grid; place-content: center; transform: rotate(45deg); opacity: 0; } @media screen and (max-width:800px) { .traction { margin-top: -0.1rem; } .container { width: 100vw; height: 300vh; display: flex; flex-direction: column; flex-wrap: nowrap; } .panel { display: flex; flex-direction: column; width: 100%; height: 100vh; } .sub-panel { padding: 1rem; width: 100%; height: 50vh; padding: 0; margin-bottom: 2rem; } .traction-content { padding: 2rem; } .cursor, .hand { display: none; } } Partner.jsx: import React, { useEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './Partner.css'; import push from '../assets/img/push.png'; import shardeum from '../assets/img/shardeum.png'; import buildbear from '../assets/img/buildbear.svg'; gsap.registerPlugin(ScrollTrigger); const Partner = () => { const partnerRef = useRef(null); useEffect(() => { const partner = partnerRef.current gsap.to(partner.children, { y: 0, stagger: 0.05, delay: 0.5, duration: 0.5, ease: "back.out", scrollTrigger: { trigger: partner, }, onComplete: () => { console.log("Partners animation") } }); }, []); return ( <div className='partner-container container-fluid d-flex'> <div className='partner-title col-md-5 d-flex align-item-center my-auto'> <h1 className='mx-auto d-flex flex-column' ref={partnerRef}> {Array.from("PARTNERS").map((letter, index) => ( <div key={index} className="letter">{letter}</div> ))} </h1> </div> <div className='partner-content col-md-7 d-flex my-auto'> <span> <img src={push} alt='push-protocol' /> <p className='partner-text mt-5'>Push Protocol</p> </span> <span> <img src={shardeum} alt='shardeum' /> <p className='partner-text mt-5'>Shardeum</p> </span> <span> <img src={buildbear} alt="build bear" /> <p className='partner-text mt-5'>Build Bear</p> </span> </div> </div> ); } export default Partner; partner.css: .partner-container { background-color: black; color: white; height: 70vh; width: 100%; display: flex; align-items: center; flex-direction: column; } .partner-title { align-self: flex-start; padding-left: 3.5rem; } .partner-title h1 { font-size: 7rem; width: 100%; font-weight: bold; display: flex; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .partner-title h1 div { transform: translateY(140px); transition: transform .5s; } .partner-content { display: flex; align-items: center; justify-content: space-evenly; width: 100%; } .partner-content img { width: auto; height: 150px; margin: 0px 50px; padding: 0px 0px; } .partner-text { font-size: 1.2rem; font-weight: 600; padding: 0; justify-content: center; text-align: center; width: 100%; } /* .partner-title h1 .char{ transform: translateY(140px); transition: transform .5s; } */ @media screen and (max-width:800px) { .partner-title h1 { font-size: 3.5rem; } .partner-title { padding-left: 2rem; } .partner-content { flex-direction: column; gap: 3rem; } .partner-content img { margin: 0; height: 100px; } } I am ready to provide other details please check

Hi Zach Saucier, I'm working on a project where I have a series of sections (e.g., "rooms" like your example) that I navigate through by scrolling. My goal is to add animations to elements within these sections that not only animate in as I scroll down to them but also perform a reverse animation as I'm about to leave the section to move on to the next one. Here's the desired user experience: I load the page, and the text in the first section animates in. As I start scrolling down towards the second section, I want the text in the first section to perform an exit animation before the page actually moves to the next section. Upon entering the second section, the text there animates in, and the process repeats for each subsequent section. Is this achievable using ScrollTrigger? I'm looking for a way to trigger the exit animation of the current section's elements before scrolling into the next section, essentially giving control over the transition between sections. I'm using this code of yours as a start. Any guidance or examples on how to implement this would be greatly appreciated. Thank you in advance for your help!

@Rodrigo Hi, I'm coming from Framer Motion where the /app/ router issue for page route transitions has been a widely discussed topic for a while and still remains unfixed. I'm currently building a project with Next.js App Router + GSAP for work, but plan to migrate to Next.js Page Router + GSAP in order to utilize page route transitions for my next project. From what I understand, the solution you linked uses React Transition Group as a wrapper to handle onEnter and onExit, where we are using GSAP to animate some components. Is this the most common pattern? I'm looking for further documentation on this and would appreciate if there was a link to the origins of this example or if there was more documentation around page transitions Next.js pages router and GSAP (with useGSAP hook). Thanks!

Hey Rodrigo, thanks for quick answer! Yeah, this is also my first time trying out astro, but i really liked its performance and a new view transitions feature. I know, i tried to use useGSAP hook also, but i guess it should work even in useEffect. I dont think the problem here is React. I created a minimal demo, just with astro components, without react. You can see, that after first render of the app, scrollSmoother is working well. after transition to another page, scroll smoother breaks ( you can check that there are no inline styles in body ). When you instantiate ScrollSmoother outside of the lifecycle function, after transition use is able to scroll, but without scrollSmoother effect. Link to demo: https://stackblitz.com/edit/github-2hpcon-axifnq?file=src%2Fcomponents%2FLayout.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Findex.astro,package.json Thanks for your time!

Guys, I'm here, unfortunately not with a demo on CodePen but with a website developed in WordPress. I've created a sort of mega dropdown menu using GSAP. Below is the code, which I would describe as spaghetti (and I welcome any advice on how to improve it). But let's get to the problem. When I hover over the "Group" menu item, the mega menu appears, and at the same time, with GSAP, I change the background of the header and the menu items to blue. When the header becomes sticky, I change the menu items' color using CSS by targeting the auto-generated class ".elementor-sticky--effects" from the module I'm using. The issue arises when the header becomes sticky without interacting first with the menu. While it's sticky, if I hover over the "Group" menu item and then scroll back to the top of the page, the menu items remain blue instead of resetting to the default white color. It's as if the reverse of GSAP goes in tilt. What could I do? Is there a way with GSAP to detect when the menu has that specific class (.elementor-sticky-effects) and change the menu color with GSAP while it's sticky? This is the dev website: https://devmanelli.ioslab.it/ This is the full code:/*mega menu gruppo*/ let menu = document.querySelector(".gruppo_menu"); let menu_item = [".other"]; let element = document.querySelector(menu_item); let drop = document.querySelector(".menu_content"); let col = document.querySelector(".elementor-location-header"); let col_menu = [".menu", ".pre-menu", ".post-menu"]; let element2 = document.querySelector(col_menu); let line = document.querySelector(".menu-item .elementor-item-active"); let container_logo = document.querySelector(".container-logo"); let animation = gsap.timeline({ paused: true }); animation.set(drop, { y: -20, zIndex: 1,}, 0); animation.to(drop, { display: "block", opacity: 1, duration: 0.3, delay: 0.2, ease: "power3.out", y: 0, }, 0); menu.addEventListener("mouseenter", () => animation.play()); element.addEventListener("mouseenter", () => animation.reverse()); element2.addEventListener("mouseenter", () => animation.reverse()); container_logo.addEventListener("mouseenter", () => animation.reverse()); col.addEventListener("mouseleave", () => animation.reverse()); document.body.addEventListener("click", () => animation.reverse()); /*mega menu progetti*/ const voice_progetti = document.querySelector(".progetti"); let drop_progetti = document.querySelector(".progetti_content"); let animation_progetti = gsap.timeline({ paused: true}); animation_progetti.set(drop_progetti, { y: -20, zIndex: 1,}, 0); animation_progetti.to(drop_progetti, { display: "block", opacity: 1, duration: 0.3, delay: 0.2, ease: "power3.out", y: 0, }, 0); voice_progetti.addEventListener("mouseenter", () => animation_progetti.play()); voice_progetti.addEventListener("mouseenter", () => animation.reverse()); voice_progetti.addEventListener("mouseenter", () => animation2.play()); col.addEventListener("mouseleave", () => animation_progetti.reverse()); element.addEventListener("mouseenter", () => animation_progetti.reverse()); /*change color header and menu*/ let header = document.querySelector(".myHeader"); let header_gradient = document.querySelector(".myHeader.elementor-sticky--effects"); let li = document.querySelectorAll(".myMenu .menu-item a:not(.custom-icon .sub-menu li a)"); let chevron = document.querySelectorAll(".custom-icon .elementor-item"); let logo = document.querySelector("#logo img"); let overlay = document.querySelector(".overlay"); let animation2 = gsap.timeline({ paused: true }); animation2.to(header, { background: "#fff", delay: 0.2, duration: 0, ease: "power2.inOut", borderBottom: "1px solid #80c5c2" }, 0); animation2.to(logo, { duration: 0.1, delay: 0.2, attr: { src: "/wp-content/uploads/2024/03/logo-manelli-mobile-blue.svg" } }, 0); animation2.to(overlay, { opacity: 0.6, display: 'block', duration: 0, }); animation2.to(li, { color: "#0C2638", duration: 0, delay: 0.2, }, 0); animation2.to(chevron, { fill: "#0C2638", duration: 0, delay: 0.2, }, 0); animation2.to(line, { '--e-global-color-d35985e': "#0C2638", duration: 0, delay: 0.2, }, 0); menu.addEventListener("mouseenter", () => animation2.play()); overlay.addEventListener("mouseenter", () => animation2.reverse()); element.addEventListener("mouseenter", () => animation2.reverse()); element2.addEventListener("mouseenter", () => animation2.reverse()); container_logo.addEventListener("mouseenter", () => animation2.reverse()); col.addEventListener("mouseleave", () => animation2.reverse()); document.body.addEventListener("click", () => animation2.reverse()); /////// This is the css that i used to color menu item on scroll effects: .header_container.elementor-sticky--effects .myMenu .menu-item a { color: #0C2638 !important; transition: all 0.3s; } A thank you to anyone willing to help me.

hi on my page: https://sharkleads.co/ im using gsap with barba js for page tranasitions. How can i achieve to noT transform logo in the page transition? So that the logo doesnt change shape. click on any link and you will se page transition. Html: <div id="layer-barba-transition"> <div class="logo-transition no-animation" style="translate: none; rotate: none; scale: none; transform: translate(0%, 100%) translate3d(0px, 0px, 0px);"> <svg width="148" height="67" viewBox="0 0 148 67" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.4402 29.6307C13.5416 29.6307 14.4365 29.562 15.1249 29.356C15.8132 29.1499 16.4328 28.9438 16.8458 28.6003C17.2588 28.2568 17.603 27.9133 17.7407 27.5011C17.8784 27.089 18.016 26.6081 18.016 26.0585C18.016 24.9594 17.4653 23.9976 16.4328 23.2419C15.4002 22.4863 13.5416 21.7306 10.9946 20.8375C9.8932 20.4254 8.72296 20.0132 7.62156 19.4636C6.52016 18.9827 5.4876 18.2958 4.59271 17.5401C3.69782 16.7844 2.94061 15.8227 2.38991 14.7235C1.8392 13.6244 1.56385 12.2504 1.56385 10.6704C1.56385 9.09038 1.8392 7.64774 2.45874 6.4112C3.07828 5.10596 3.90433 4.07551 5.00573 3.18245C6.10713 2.28939 7.41505 1.60242 8.99831 1.12154C10.5816 0.640661 12.3025 0.43457 14.23 0.43457C16.5704 0.43457 18.5667 0.709358 20.2188 1.19024C21.9398 1.67111 23.3165 2.22069 24.3491 2.83896L22.1463 8.95298C21.1826 8.47211 20.15 7.99123 18.9798 7.64774C17.8095 7.30426 16.3639 7.09817 14.7118 7.09817C12.8532 7.09817 11.5453 7.37296 10.7193 7.85383C9.8932 8.33471 9.48018 9.15907 9.48018 10.1895C9.48018 10.8078 9.61785 11.3574 9.8932 11.7696C10.1686 12.1817 10.5816 12.5939 11.1323 12.9374C11.683 13.2809 12.3025 13.6244 12.9909 13.8992C13.6793 14.1739 14.5053 14.4487 15.3314 14.7922C17.1211 15.4792 18.7044 16.0975 20.0123 16.7157C21.3202 17.334 22.4216 18.0897 23.3165 18.9827C24.2114 19.8071 24.831 20.8375 25.244 22.0054C25.657 23.1732 25.8635 24.5472 25.8635 26.1959C25.8635 29.4247 24.7621 31.8977 22.4905 33.6152C20.2188 35.4013 16.8458 36.2256 12.3025 36.2256C10.7881 36.2256 9.41134 36.157 8.17226 35.9509C6.93319 35.7448 5.83179 35.5387 4.9369 35.2639C3.97317 34.9891 3.21596 34.7143 2.52758 34.4395C1.83921 34.1647 1.2885 33.89 0.806641 33.6152L3.00944 27.5011C4.04201 28.0507 5.28108 28.5316 6.79551 29.0125C8.44761 29.4247 10.2374 29.6307 12.4402 29.6307Z" fill="#141414" /> <path d="M99.519 0.84668C104.682 0.84668 108.606 1.73974 111.359 3.59456C114.113 5.44937 115.489 8.26594 115.489 12.113C115.489 14.5174 114.939 16.5096 113.837 17.9522C112.736 19.3948 111.153 20.6314 109.019 21.5244C109.707 22.3488 110.464 23.3793 111.221 24.4784C111.979 25.5776 112.736 26.7454 113.493 27.9133C114.25 29.0811 114.939 30.3863 115.627 31.6916C116.315 32.9968 116.935 34.3021 117.554 35.5386H108.881C108.261 34.4395 107.642 33.2716 106.953 32.1038C106.265 30.9359 105.646 29.8368 104.957 28.7376C104.269 27.6385 103.58 26.608 102.961 25.6463C102.273 24.6845 101.653 23.7914 100.965 23.0358H97.1786V35.5386H89.4688V1.73974C91.1897 1.39625 92.9106 1.19016 94.7004 1.05277C96.4902 0.915376 98.0735 0.84668 99.519 0.84668ZM100.001 7.44158C99.4502 7.44158 98.9683 7.44158 98.4865 7.51028C98.0046 7.51028 97.5916 7.57897 97.2474 7.57897V16.8531H99.4502C102.341 16.8531 104.407 16.5096 105.714 15.7539C107.022 14.9982 107.573 13.8304 107.573 12.0443C107.573 10.3268 106.953 9.159 105.646 8.47203C104.338 7.78506 102.479 7.44158 100.001 7.44158Z" fill="#141414" /> <path d="M137.932 35.5385C137.243 34.4394 136.417 33.2028 135.453 31.8976C134.49 30.5924 133.526 29.2871 132.425 27.9819C131.323 26.6766 130.222 25.3714 128.983 24.2035C127.812 22.967 126.573 21.9366 125.403 20.9748V35.4698H117.693V1.25879H125.403V14.1051C127.399 12.0442 129.396 9.8459 131.461 7.5789C133.526 5.31191 135.385 3.1823 137.106 1.25879H146.261C143.92 4.00666 141.58 6.68584 139.24 9.29632C136.899 11.9068 134.421 14.4486 131.805 17.0591C134.559 19.3261 137.174 22.0739 139.721 25.1653C142.268 28.3254 144.747 31.7602 147.087 35.5385H137.932Z" fill="#141414" /> <path d="M47.6855 60.8187V65.6961H30.8203V40.4844H36.5338V60.8187H47.6855Z" fill="#141414" /> <path d="M47.3418 56.2847C47.3418 54.5672 47.6171 53.1246 48.099 51.8194C48.5809 50.5141 49.3381 49.4837 50.1641 48.6593C50.9902 47.8349 52.0227 47.148 53.1242 46.7358C54.2256 46.3236 55.3958 46.0488 56.566 46.0488C59.3195 46.0488 61.4535 46.8732 63.0368 48.5219C64.62 50.1706 65.3772 52.6437 65.3772 55.8725C65.3772 56.216 65.3772 56.5595 65.3772 56.9029C65.3772 57.2464 65.3084 57.5899 65.3084 57.9334H52.9176C53.0553 59.0325 53.5372 59.9256 54.5009 60.6126C55.4646 61.2995 56.6349 61.5743 58.2181 61.5743C59.2507 61.5743 60.2144 61.5056 61.1782 61.2995C62.1419 61.0934 62.8991 60.8874 63.5186 60.6126L64.2758 65.0092C64.0005 65.1466 63.5875 65.284 63.1056 65.4213C62.6237 65.5587 62.073 65.6961 61.4535 65.8335C60.834 65.9709 60.2144 66.0396 59.526 66.1083C58.8377 66.177 58.1493 66.2457 57.4609 66.2457C55.74 66.2457 54.2256 65.9709 52.9865 65.49C51.7474 65.0092 50.646 64.2535 49.8199 63.4291C48.9939 62.6048 48.3744 61.5056 47.9613 60.2691C47.5483 59.0325 47.3418 57.7273 47.3418 56.2847ZM60.1456 54.2238C60.1456 53.7429 60.0079 53.3307 59.9391 52.8498C59.8014 52.4376 59.5949 52.0255 59.3195 51.682C59.0442 51.3385 58.7 51.0637 58.287 50.8576C57.8739 50.6515 57.3232 50.5141 56.7037 50.5141C56.0842 50.5141 55.6023 50.6515 55.1204 50.8576C54.6386 51.0637 54.2944 51.3385 54.019 51.682C53.7437 52.0255 53.4683 52.4376 53.3307 52.8498C53.193 53.3307 53.0553 53.7429 52.9865 54.2238H60.1456Z" fill="#141414" /> <path d="M73.7068 46.0488C75.2901 46.0488 76.6668 46.2549 77.6994 46.5984C78.732 46.9419 79.6269 47.4915 80.2464 48.1784C80.8659 48.8654 81.3478 49.6898 81.6231 50.6515C81.8985 51.6133 82.0362 52.7124 82.0362 53.8803V65.1466C81.279 65.284 80.1776 65.49 78.8008 65.7648C77.424 65.9709 75.7031 66.1083 73.7757 66.1083C72.5366 66.1083 71.4352 65.9709 70.4026 65.7648C69.3701 65.5587 68.544 65.2153 67.7868 64.6657C67.0296 64.1161 66.4789 63.4978 66.1347 62.7422C65.7217 61.9178 65.584 60.9561 65.584 59.7882C65.584 58.6891 65.7905 57.7273 66.2724 56.9716C66.7542 56.216 67.3049 55.5977 68.0621 55.1168C68.8194 54.6359 69.6454 54.2925 70.678 54.0864C71.6417 53.8803 72.6743 53.7429 73.7068 53.7429C74.3952 53.7429 75.0147 53.7429 75.5654 53.8116C76.1161 53.8803 76.5292 53.949 76.8733 54.0177V53.5368C76.8733 52.6437 76.598 51.8881 76.0473 51.3385C75.4966 50.7889 74.5329 50.5141 73.1561 50.5141C72.2612 50.5141 71.2975 50.5828 70.4026 50.7202C69.5077 50.8576 68.7505 51.0637 68.0621 51.2698L67.3738 46.8732C67.7179 46.8045 68.0621 46.6671 68.544 46.5297C69.0259 46.3923 69.5077 46.3236 70.0584 46.2549C70.6091 46.1862 71.2287 46.1175 71.8482 46.0488C72.4677 46.1175 73.0873 46.0488 73.7068 46.0488ZM74.1887 61.9178C74.7394 61.9178 75.2212 61.9178 75.7031 61.9178C76.185 61.9178 76.598 61.8491 76.8733 61.7804V57.6586C76.6668 57.5899 76.3226 57.5899 75.9096 57.5212C75.4966 57.4525 75.0836 57.4525 74.6705 57.4525C74.1887 57.4525 73.7068 57.4525 73.225 57.5212C72.7431 57.5899 72.3989 57.7273 72.0547 57.8647C71.7105 58.0021 71.4352 58.2769 71.2287 58.5517C71.0222 58.8264 70.9533 59.2386 70.9533 59.6508C70.9533 60.4752 71.2287 61.0934 71.7794 61.4369C72.3989 61.7804 73.1561 61.9178 74.1887 61.9178Z" fill="#141414" /> <path d="M101.173 65.0781C100.691 65.2155 100.141 65.3529 99.5211 65.4902C98.9015 65.6276 98.2131 65.765 97.5248 65.8337C96.8364 65.9024 96.148 66.0398 95.3908 66.0398C94.7024 66.1085 94.0141 66.1085 93.3257 66.1085C91.7424 66.1085 90.3657 65.9024 89.0577 65.4215C87.7498 64.9407 86.7861 64.3224 85.8912 63.4293C85.0652 62.605 84.3768 61.5058 83.9638 60.2693C83.4819 59.0327 83.2754 57.6588 83.2754 56.1475C83.2754 54.5674 83.4819 53.1935 83.8261 51.957C84.2391 50.7204 84.7898 49.6213 85.4782 48.7969C86.1666 47.9725 87.1303 47.2856 88.1629 46.8047C89.1954 46.3238 90.4345 46.1177 91.8112 46.1177C92.5685 46.1177 93.2568 46.1864 93.8075 46.3238C94.4271 46.4612 94.9778 46.6673 95.5973 46.9421V38.355L101.035 37.4619V65.0781H101.173ZM88.9201 56.0101C88.9201 57.6588 89.2643 59.0327 90.0215 60.0632C90.7787 61.0936 91.8801 61.5745 93.3945 61.5745C93.8764 61.5745 94.3582 61.5745 94.7713 61.5058C95.1843 61.5058 95.5285 61.4371 95.8038 61.3684V51.5448C95.4596 51.3387 95.0466 51.1326 94.4959 50.9952C93.9452 50.8578 93.3945 50.7891 92.8438 50.7891C90.1591 50.7891 88.9201 52.5065 88.9201 56.0101Z" fill="#141414" /> <path d="M109.089 61.8498C110.121 61.8498 110.81 61.7811 111.223 61.575C111.636 61.3689 111.842 61.0254 111.842 60.4758C111.842 60.0636 111.567 59.6515 111.016 59.308C110.466 58.9645 109.64 58.621 108.607 58.2088C107.781 57.8653 106.955 57.5905 106.267 57.2471C105.578 56.9036 104.959 56.4914 104.477 56.0105C103.995 55.5296 103.651 54.9801 103.375 54.2931C103.1 53.6061 102.962 52.8505 102.962 51.9574C102.962 50.1713 103.651 48.7286 104.959 47.6982C106.267 46.6677 108.125 46.1182 110.466 46.1182C111.636 46.1182 112.737 46.2556 113.839 46.4616C114.871 46.6677 115.766 46.8738 116.386 47.1486L115.422 51.4078C114.802 51.2017 114.114 50.9956 113.357 50.8583C112.6 50.7209 111.774 50.5835 110.879 50.5835C109.158 50.5835 108.332 51.0643 108.332 52.0261C108.332 52.2322 108.332 52.4383 108.469 52.5757C108.607 52.7131 108.676 52.9192 108.882 53.0565C109.089 53.1939 109.433 53.4 109.777 53.6061C110.121 53.8122 110.603 54.0183 111.223 54.2244C112.393 54.6366 113.426 55.1175 114.183 55.5296C114.94 55.9418 115.56 56.4227 116.041 56.9036C116.523 57.3845 116.799 57.934 117.005 58.5523C117.212 59.1706 117.281 59.8575 117.281 60.6819C117.281 62.6054 116.592 63.9794 115.147 64.9411C113.701 65.9029 111.705 66.3837 109.089 66.3837C107.368 66.3837 105.991 66.2464 104.821 65.9716C103.72 65.6968 102.893 65.422 102.48 65.2159L103.375 60.8193C104.27 61.1628 105.234 61.5063 106.198 61.6437C107.161 61.7811 108.125 61.8498 109.089 61.8498Z" fill="#141414" /> <path d="M53.8799 35.5385H53.7422C53.7422 35.5385 54.4994 35.5385 55.532 35.3324V1.25879H47.7533V14.3799H34.8119V1.25879H27.0332V35.5385H34.743V20.9748H47.7533V35.5385H53.8799Z" fill="#141414" /> <path d="M86.2342 25.3027C85.064 22.1426 83.9626 19.1887 82.7923 16.4408C81.6221 13.6929 80.5895 11.0137 79.4881 8.54066C78.3867 6.06757 77.2853 3.59448 76.1839 1.25879H68.8183C67.6481 3.66318 66.5467 6.06757 65.4453 8.54066C64.3439 11.0137 63.2425 13.6929 62.1411 16.4408C61.0397 19.1887 59.8694 22.1426 58.6992 25.3027C57.5289 28.3941 56.3587 31.7602 55.0508 35.4011C56.634 35.1264 59.181 34.4394 60.6266 32.6533C69.1625 18.2269 81.9663 15.1356 81.9663 15.1356C78.5932 20.4939 78.3867 25.9897 78.3867 25.9897L76.7346 27.1575L78.3179 28.0506C78.2491 29.6306 78.3179 31.1419 78.4556 32.5159C78.9374 33.0655 79.6258 33.6837 80.5895 34.302C82.104 35.1951 83.5495 35.4698 84.7198 35.6072H89.9514C88.6435 31.8289 87.4045 28.3941 86.2342 25.3027Z" fill="#141414" /> </svg> </div> </div> JS: function pagetransition() { var tl = gsap.timeline(); // Set the initial scaleY of the inner logo to 1 gsap.set(".logo-transition", { scaleY: 1 }); tl.to("#layer-barba-transition", { duration: 0.9, scaleY: 1, transformOrigin: 'top', ease: Power3.easeInOut, }); // Add a delay to give time for the scaling animation to finish tl.add(delay(700), 0); // 700ms delay to match the scaleY animation duration // Scale the outer div to 0 tl.to("#layer-barba-transition", { duration: 0.7, scaleY: 0, transformOrigin: 'bottom', ease: Power3.easeInOut, delay: 0 }); // Set the scaleY of the inner logo back to 0 tl.set(".logo-transition", { scaleY: 0 }); } // Function to Delay function delay(n) { n = n || 1000; return new Promise(done => { setTimeout(() => { done(); }, n); }); } // Initial Content Animation function contentAnimation() { var tl = gsap.timeline(); tl.from(".left", { x: -200, y: 0, duration: 1, ease: Power3.easeInOut, opacity: 0 }); }

Hi Cassie ty for response. Considering that there are two different systems, I tried to reproduce all the conditions, trying to get close to a probable issue. I created the CodePen. In the CodePen, I apply a class to the scroll event on the header named .sticky. While in WordPress, the class on the header is applied on scroll by the settings of the module named .elementor-sticky--effects. As you'll notice in the CodePen, when the header is sticky, I change the color of 'a' elements, forcing it with !important. This is because in WordPress, I'm forced to override the module's rule in order to change the color of the menu items on sticky. The CSS on the website is as follows: .header_container.elementor-sticky--effects .myMenu .menu-item a { color: #0C2638 !important; transition: all 0.3s; } As you'll notice from the CodePen, when I interact with the menu items while the header is sticky and then return to the top of the page, the color of 'a' elements doesn't reset but remains red. This is probably because the CSS rule is taking precedence ? So, I wonder why the rule resets when I don't interact ? How can I avoid this problem considering that I must have the CSS rule with !important? https://codepen.io/Antonio-Nocella/pen/XWQRdzQ

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' })

Hello! It’s great to see your enthusiasm for GSAP, React, and route transitions. 😊 The StackBlitz link you shared provides simple examples for setting up animated page transitions in React using GSAP, React Router, and React Transition Group. It’s an excellent starting point for anyone diving into this exciting combination of technologies. The main concept is there, even if it’s a work in progress. For those interested, the link demonstrates how to create smooth transitions between different routes in a React app. By leveraging GSAP’s animation capabilities and integrating them with React Router and React Transition Group, you can achieve delightful page transitions. If you’re looking for more examples or have questions, feel free to explore the provided link. And stay tuned for additional news and examples related to GSAP + React (NextJS/Gatsby)! Happy tweening! 🚀🎉

Hi, In this cases is about when to remove the content of the previous page and render the content of the next page. This is the key regardless if you're creating your own SPA library or using another (React, Vue, Svelte, etc.). Here is how is explained in Vue, which I believe is the simplest way to explain and show how this works: https://vuejs.org/guide/built-ins/transition.html#transition-modes That is mostly a JS/DOM-rendering issue rather than a GSAP one. From an academic and professional stand point I'd suggest you to just do the best possible work by focusing in what was asked for you to do. Either as a professor or boss of someone I'd prefer to have delivered what I asked, a vanilla routing system, once that is working as expected and there is 100% proof that is flawless, we can consider to add all the bells and whistles to it, if we saw fit to do so. Of course if your code is working as expected and you're covering all the possible scenarios (hash routing, url queries, dynamic routes, etc) then adding the animations to it would be nice. Good luck with your assignment! 👍 Happy Tweening!

Hi, In no case this means that React can't work with GSAP, you can use GSAP in react environments without any issues. The problem stems from a shortcoming (and this is 100% a personal opinion and in no case a reflection of the thoughts of GreenSock on the subject) in the way React was created, since at no point a native animation solution was considered. By this I don't mean React creating an animation library or anything like that is about controlling animations, that's why developers have to resort to external libraries and packages to handle some aspects of the animations (like animate before unmounting, right after mounting, control render states, etc.), which sometimes feels quite hacky and convoluted. On the other hand Vue did considered animations and added them to it's core: https://vuejs.org/guide/built-ins/transition.html Using the JS hooks in Vue is super simple and reduces the hassle you have to go through in order to create animations and you don't need any external libraries to make it work. Of course Nuxt abstracts this even more making something simple even simpler: https://nuxt.com/docs/getting-started/transitions If you're still on the fence of which framework to choose, I'd strongly recommend you to go the Vue/Nuxt route (again 100% personal opinion), they general approach is simpler and cleaner. Directives are far more intuitive IMHO than JSX, you can scope your styles on an easier way with Vue, they keep JS out of the HTML and Vue is compatible with the web component API: https://developer.mozilla.org/en-US/docs/Web/API/Web_components I haven't dig on Svelte but I heard nothing but great things about it. I know that @Dipscom uses it on his projects and that's good enough for me. Also @SteveS one of our superstars here in the forums made a nice presentation for the Svelte summit that you can find here: Finally demos, because those speak more than words. Page Transitions in Next: https://stackblitz.com/edit/nextjs-13cw4u Page Transitions in Nuxt: https://stackblitz.com/edit/nuxt-starter-bthjlg Hopefully this helps. If you have more questions feel free to ask. Happy Tweening!

Hi, That is due to the transition mode set in the transition config: https://vuejs.org/guide/built-ins/transition.html#transition-modes Right now the demo you forked uses out-in, which means the current component/page is animated out first and when that is completed the in animation of the next route happens. If you want to have both transitions happen at the same time you have to remove the mode attribute from the transition config, but beware that this will require a lot of extra work, since both pages will be rendered in the DOM at the same time. This will mean changing a lot of styles and you'll also have to become quite creative about when exactly you have to create the ScrollTrigger instances, because the document height probably won't reflect the natural height given the elements it will have in it after the animations are completed, which most likely will throw off every calculation ScrollTrigger makes, so I'd suggest you to remove the scrolling from the body tag while the animations happen, add it back again when the transitions are done and once you have a body tag that is scrollable, then make the ScrollTrigger calculations. You can see what I mean in this demo in the Vue playground. Hopefully this helps. Happy Tweening!

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.

Hey @Rodrigo, I feel like I'm failing to explain correctly. While I completely understand that this is the correct functionality of FLIP, I feel like it could be enhanced by allowing to do it's calculations relative to the viewport and not the document. This is immensely helpful when, like in my example, you are clicking from a link to a page, this link could be anywhere on the page but the page it navigates to the image may cover the full screen. It allows for a smooth transition between pages. This seems to be FOUC (Flash Of Unstyled Content): https://gsap.com/resources/fouc/ Maybe you could set the visibility to hidden and before animating the Flip instance you can set the visibility back to visible: Not so much something different, by making the calculations relative to the viewport within GSAP, you don't have to manipulate the DOM directly before the calculations which will means the FOUC will never be an issue. Something like `{ includeScroll: false }` for when you are wanting to do an effect like this. EDIT: https://stackblitz.com/edit/nuxt-starter-sa9nzp?file=pages%2Findex.vue Maybe this is better explained by showing how it's fixed, so setting y and removing the scroll position allows for a smoother animation, however, here you are directly manipulating the DOM element, which means if there is a delay in the next page loading, the element will disappear off screen as you are setting the 'y' to allow for FLIP to do calculations. By allowing this as a flag to remove scroll position from it's calculations, you don't need to directly manipulate the DOM element meaning FOUC would not be an issue.