Search the Community

Hey everyone, fairly new to gsap flip animations, Am getting this weird behavior where my image in a card scales in Y directions\ which is unexpected, it creates a unwanted transitions and also when a card or image is in view it doesn't start from there (from current state), For example if I have a card situated after few cards and when I click it when its in view, it scales and travels from way down, where the expected behavior should be just smooth scaling from current position. I hope I explained my issue (I may have not explained well but it would be easier to understand by watching yourself) This is what I want to somewhat achieve, a reference : https://raw.githubusercontent.com/mattcroat/joy-of-code/main/posts/impossible-layout-animations-with-svelte/images/flip-movies.mp4 MY CODE : https://stackblitz.com/edit/sveltejs-kit-template-default-rzlsxh?file=src%2Froutes%2F%2Blayout.svelte Help would be really appreciated, Thanks!

Hi there, I was working on a flip animation across two distinct components where there are a group of elements that are flip-ed across these components. The two components represent two distinct "pages", one is for 'dual-view' and the other is for 'single-view'. The two components have heights larger than the viewport. Hence, we can scroll vertically for each of these components. I noticed that when I don't scroll before triggering the animation, the animation worked perfectly fine, but when I gave it some vertical scroll before triggering the animation, the elements didn't seem to start at the expected positions. Seems like scrolling messed up the starting position of my flip animations. I attach a minimally relevant REPL that I recreated from scratch and also a video explaining the problem. I hope it makes the problem clearer. https://svelte.dev/repl/6fde0174bda140c78b5f9ccf6b9238c5?version=4.2.18 What might be interesting to note is that when I tried to see what I got from calling flip.getState() just before starting the flip animation, the bounds data for all the elements are right. In particular the y data are spot on. So, I am confused how come the animation doesn't seem to start from that recorded position. I tried to give a translate of -window.scrollY for the elements using gsap.set(targets, {y: -window.scrollY}) like so, as suggested here https://gsap.com/community/forums/topic/39827-nuxt3-flip-animation-between-pages-ignore-scroll-position/#:~:text=gsap.set('.el'%2C { y%3A -window.scrollY }) , but it doesn't seem to make the animation start at the right position either. ---------------------------------------------------------------------- Somewhat a distinct problem, but I am wondering if I could get some good starting idea here. As you can see, the paragraphs shift when switching between views. I want to be able to "follow" a specific paragraph when the transition is happening. So, during the flip animation, I want exactly one paragraph to stay fixed in the viewport (more specifically, one has a constant y position from the top of the viewport), and the all the others could move freely, either converging to, or diverging away from that "frozen" paragraph. If such functionality is possible, it would be really great for my use case, and I'd be even more amazed by this elegant library. Thank you!

Hi, How would one go about creating animated tabs like this with GSAP. https://buildui.com/recipes/animated-tabs The above link has been created in framer motion. And I believe framer motions Animate Presence is similar to GSAP FLIP. I've tried doing it with FLIP but haven't had much success. Would love some help pointing me in the right direction. I'm building this in NextJS. Below is my code. The pill element is added/removed behind the text whenever the path changes. export default function NavTextZoop({ text, href, className }) { const path = usePathname(); const state = useRef(null); useGSAP(() => { state.current = Flip.getState(".navWrapper, .pill"); console.log(state.current) }); useEffect(() => { Flip.from(state.current, { duration: 2 }); }, [path]); return ( <Link href={href}> <div className={twMerge( "h-[1.5em] relative px-2.5 py-1 flex justify-center items-center navWrapper", className )} > {href === path && ( <div className="pill bg-white absolute inset-0 h-full rounded-full" ></div> )} <span className="flex h-[1.5em] overflow-hidden items-center justify-center"> <span className="letter inline-block relative leading-[1.5em] h-[1.5em]"> {text} </span> </span> </div> </Link> ); }

Hello team,I hope to use Flip in Nuxt3 to achieve a caterpillar effect,so here my code: https://codesandbox.io/p/devbox/flip-nuxt3-dd792k This example was copied from the official demo: https://codepen.io/GreenSock/pen/Yzdzxem but the difference is that I used the Nuxt3(Vue3). But the result was not as expected, the newly generated DOM elements had no style like below. I have thought that maybe I should not manipulate DOM in Vue, but if I only change responsive data, then it only changes the order of data and does not display Flip animations. So where did I go wrong?Thanks!

When add `.active` class, the `.text` trigger the `onEnter` animation, it's fine. When remove the `.active` class, `onLeave` still runs, but because the `.large` set `display: none` immediately, so the animation is invisible. How can this situation be resolved? Is it only possible by changing the HTML structure?

Hi, I have a pinned section with 3 main children. I'm using ScrollTrigger on the pinned container and allowing it to scroll for 3000 pixels. I want to trigger an animation at 20%, 60%, and 80% of the pinned container scroll progress. These are all simple opacity/x/y changes. There is, however, a section that is in a grid and requires the use of Flip. I sadly do not have a reproduction demo but do have illustrations that illustrate what I mean: - White container is the pinned container - Blue gets hidden at 20% scroll progress - Orange moves up at 20% scroll progress (requires Flip) At 60% the Orange element moves up again, and the green section is revealed. 0%: 20%: 60%: I tried a lot of combinations but none worked except creating all the triggers separately and with absolute pixel values, but still failed to use Flip: // Blue element gsap.to(introContainerRef.current, { opacity: 0, y: -20, duration: 1, delay: 0, scrollTrigger: { trigger: introContainerRef.current, markers: true, start: 'top top', end: '+=100px top', toggleActions: 'restart resume reverse reverse', }, }) // Orange Flip.to(state, { opacity: 0, y: -20, duration: 1, delay: 0, scrollTrigger: { trigger: mediaRef.current, markers: true, start: 'top top', end: '+=100px top', toggleActions: 'restart resume reverse reverse', }, }) Any ideas? Thanks a lot in advance!

I'm trying to create an animation that a bigger text animate to a smaller one, but the animation is just jumping, I've tried other things from the docs/community but I can't fix this... Am I doing the right thing?

Hey people, Simply, I want to make this text transition, 20240711-0916-21.0398922.mp4 I tried to do it with Flip, but it probably doesn't support text, I tried Flip.fit and it didn't work as well(maybe don't know how to use it) So, is it doable.

Hello, I have a column of cards. When any of the cards is clicked, it expands using Flip plugin and changes its height and previously opened cards close. But there is an issue - if I try to open card below any other opened card, the viewport jumps as you can see on the video. I don't use any scroll manipulation, only the Flip plugin. I recorded what is exactly happening https://streamable.com/fwowm3. If it does not help please let me know and I will try to create a demo. EDIT: It seems like when there is enough room in the viewport for the full height of expanded card, the issue is gone, otherwise it glitches like that. EDIT 2: It does not glitch as long as the final state is that I can see currently clicked card fully expanded and at least few pixels of the above card in viewport. EDIT 3: Looks like adding this code to the card flip animation kind of helps, but the behavior has to be set to "instant" as "smooth" is too slow. However this approach does not look nice as the card instantly snaps to the top of viewport. onUpdate: () => { // Check if the top of the card is in view during the animation const rect = recipeCard.getBoundingClientRect(); if (rect.top < 0 || rect.top > window.innerHeight) { const scrollOffset = rect.top - 20; // Adjust 20 pixels of space above window.scrollBy({ top: scrollOffset, behavior: "instant" }); } },

Hi GSAP Community, I am working on an animation where an element (targetEl) moves between different zones (zoneEl) as the user scrolls. However, I'm facing an issue with tracking the initial position of targetEl correctly. The targetEl is inside zoneEl.first(), which is in another div with a height of 1500dvh and is animated to move from right to left by -100dvh. This movement is causing the targetEl to start in the wrong position, and the animation does not play correctly. Here is the code I am using (fille in attaches): window.addEventListener("DOMContentLoaded", (event) => { // SETUP PLUGINS gsap.registerPlugin(ScrollTrigger, Flip); ScrollTrigger.normalizeScroll(true); // SETUP ELEMENTS let zoneEl = $("[js-scrollflip-element='zone']"), targetEl = $("[js-scrollflip-element='target']").first(); // SETUP TIMELINE let tl; function createTimeline() { if (tl) { tl.kill(); gsap.set(targetEl, { clearProps: "all" }); } tl = gsap.timeline({ scrollTrigger: { trigger: zoneEl.first(), start: "center center", endTrigger: zoneEl.last(), end: "center center", scrub: true } }); zoneEl.each(function (index) { let nextZoneEl = zoneEl.eq(index + 1); if (nextZoneEl.length) { let nextZoneDistance = nextZoneEl.offset().top + nextZoneEl.innerHeight() / 2; let thisZoneDistance = $(this).offset().top + $(this).innerHeight() / 2; let zoneDifference = nextZoneDistance - thisZoneDistance; tl.add( Flip.fit(targetEl[0], nextZoneEl[0], { duration: zoneDifference, ease: "power2.inOut" }) ); } }); } createTimeline(); // SETUP RESIZE let resizeTimer; window.addEventListener("resize", function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { createTimeline(); }, 250); }); }); The problem is that targetEl is positioned incorrectly because zoneEl.first() is animated with a -100dvh shift from right to left. I need to track the initial position of targetEl correctly so that the animation starts at the correct position with the right coordinates and dimensions. I have included a video explanation and a link to my site for more context: Video: https://www.loom.com/share/9bfb3434afcc432b8fb6ab969bed136c?sid=188e85ea-b5a8-42f3-bd02-f52f103f7b57 Website: https://s-liudvichenko.webflow.io Any help or suggestions would be greatly appreciated! Thank you! gsap--flip-ds-layer.js

spring ease feels very stiff when i use it with Gsap flip, I have added a simple demo of a single transitioning between 2 heights with flip to showcase the issue. Click on the green div to see the transition. https://stackblitz.com/edit/vue-x7dbrl?file=src%2FApp.vue

I'm trying to animate the width of an element using ScrollTrigger and FLIP. It works fine except that on certain viewport widths it adds an unwanted Y translation on the element, usually something like translate3d(0px, -74.8404px, 0px);I first noticed this behaviour after opening up dev tools and refreshing the page (essentially resizing viewport). I also noticed that this might be related to the grid-template-columns of the the parent element which sets the target element to take up min-content. the translation isn't added when i use a fixed width but that causes the image to grow to fit a static layout instead of the layout changing as the image grows. I have attached a codepen link and screenshots of current behaviour and expected behaviour. Thanks and looking forward to a response from the good people of GSAP!! Note that this tends to happen after resizing the viewport and refreshing ( i am yet to make it responsive). it happens with viewports about 600 pixels wide so the bug might not show up in the codepen embed.

Hi there! I've been working on a modal for some products. I found the best way was to use the Flip.fit() to overlay the 'duplicate' modal elements before transiting them back to their original state. This is why I've had to use the Flip.to() method (open to other suggestions though!). What appears to be happening now is that the title causes the image to offset on Flip. The original state is required to have the .hxl class but has been scaled down to fit the original title. Any suggestions on how I can prevent the offset and transition it smoothly? Cheers!

I hope you are doing well! I'm new with GSAP and I'm having a lot of problems with a complex animation. I tried to create a codepen as simple as possible so you can see what's going on, sorry if it's not very simple. Basically, I'm trying to make an animation like the one used in https://www.revolut.com/ but I can't get it to work, I think I improved the logic of the approach but there is something that keeps making it jump when adding or removing classes. If you need more context or whatever let me know. Thank you very much for your time.

i am very new to into gsap. i am trying to implement a image rotation animation like what is done in this website https://swagapp.com/?ref=godly the image rotates 180 degree first and then tags appear in image which are also kind of animating and floating on the image, meanwhile image also continuosly goes up and down and also rotates a little bit. after 2,3 seconds image then rotates to 360 degree and then the same initial static image appears with no animation. i am trying to implement in reactjs. kindly help me achieve this. i would really really appreciate this.

I'm new to GSAP and try to use it with Next.js (React.js). I understand Tween and Timeline, but still can't get my head around Flip. I want to make Grid item view just like the example, but with useGSAP in React. I still can't make it flip. Is there any similar example I can follow?

Hi Awesome, GSAP community! I'm trying to achieve scrubbing using GSAP Flip animation. I'm facing an issue while scrubbing back to the top. Any idea why it's happening? Here is the codepen URL: https://codepen.io/azizqamar7/pen/XWGozxM When the end of the element crosses the center of the screen, while scrubbing back GSAP FLIP doesn't work properly, am I doing something wrong?

I am working on a navigation menu that uses a dot underneath the active link. I want to animate the dot by reparenting it using Flip when a user navigates to a different page. I found a helpful example of reparenting using Flip in a react project created by someone here, and I forked it. My fork is here: https://stackblitz.com/edit/vitejs-vite-9pac1m?file=src%2FApp.jsx I have added a new onClick handler `handleParentClick` that is triggered by each parent link. The handler gets the index of the link from a data attribute. I expected this to work, but each time I click a parent I get the following error: react-dom_client.js?v=14fad21f:16659 Uncaught TypeError: Cannot read properties of null (reading '_gsap') at Object._getCache2 [as getCache] (gsap.js?v=c3ccde3e:132:17) at ElementState2.update (gsap_Flip.js?v=e3486289:1024:101) at new ElementState2 (gsap_Flip.js?v=e3486289:1016:10) at gsap_Flip.js?v=e3486289:890:14 at Array.map (<anonymous>) at FlipState2.update (gsap_Flip.js?v=e3486289:889:39) at new FlipState2 (gsap_Flip.js?v=e3486289:883:12) at _parseState2 (gsap_Flip.js?v=e3486289:592:65) at Function.from (gsap_Flip.js?v=e3486289:1246:27) at App.jsx:32:10 I'm not sure how to troubleshoot this error and hoping someone can point me in the right direction.

https://stackblitz.com/edit/react-942bze?file=src%2Fstyle.css Having a little trouble with useGsap hook.I am not able to make the flip animation work using useGsap otherwise it works fine.

Hi all, when I resize the window, the animation doesn't work anymore. I tried to get this animation work on resizing the window with updating the values on resize but nothing works. Is there someone who can tell me the secret?

Hi! how is it going? Context Recently I've been working on a proyect on which I have to implement FLIP, Timeline and ScrollTrigger... Basically the animation goes this way, a little bit of context: At first I have a laptop SVG covering the entire screen, when the user scrolls, the SVG goes from the full screen to a child container on it, while the user is scrolling the animation is running ( for this I'm using the scrub property in ScrollTrigger), when the SVG is positioned where it has to be at the end, a SVG phone appears and goes next to the laptop. (In the Codepen that i've just created doesn't appear the phone, it isn't important at the moment) What's happening? I have 2 problems; When the page loads for the first time the laptop is positioned where it has to be covering the full screen, the first problem occurs when I scroll just after the end of the scroll, the SVG "Jumps" and when I scroll back the SVG is not positioned to the top of the page as it was before (please open the codepen in fullscreen so you can see the bug better). The other problem is that I can't make it responsive, when I set the parent to flex-wrap: wrap-reverse; it breaks and the laptop doesn't fit in the container and overflows the viewport

This image explains what I want(I hope it is enough and no need for a Pen). I have a sphere animated from the initial state to the second state(the middle of the screen), at this step, I want to catch the current state to be able to animate to the final state(the bottom of the screen). Is this possible to do using Flip? I've tried to catch the new state once the first animation is completed, but didn't work as well spheres.forEach((sphere, i) => { const state = Flip.getState(sphere, { props: "transform,z-index" }); const sphereParent = spheresParents[i]; sphereParent.appendChild(sphere); const flip = Flip.from(state, { simple: true, duration: 1, onComplete: () => { const newState = Flip.getState(sphere, { props: "transform,z-index" }); spheresFinalParent.appendChild(sphere); const flip2 = Flip.from(newState, { simple: true, duration: 1, }); ScrollTrigger.create({ trigger: ".animation-final", markers: true, start: "top 10%", end: "center 10%", scrub: true, toggleActions: "play none none reverse", animation: flip2, }); }, }); ScrollTrigger.create({ trigger: "#scroll-container", markers: false, start: "50% 10%", end: "100% 10%", scrub: true, toggleActions: "play none none reverse", animation: flip, }); });

Hi guys, maybe it's a beginner question. But I can't get this to work or haven't quite grasped the concept yet. I am trying to smoothly morph the ".projects-state-n" classes one by one. I take the current state, replace the old class with the new one and do FLIP. What did I miss?

Trying to use the FLIP plugin in svelte and having an issue. I am changing the width of a div changing it's grid-column value dynamically. the grid value will change from "9 / 14" to "6 / 14" for example, and I am using the FLIP plugin to animate the changing width. It works just fine in one direction, as the line gets larger, but going in the opposite direction the flip process actually messes up the width of the grid-columns of the parent grid. I am expecting that this will NOT happen... In any case, the video explains it much better, and with a visual example...I can try to make a codepen at some point, though not really sure how to port svelte into there...will try to do if needed. Video explaining the issue... Thank you for your help!

sap.registerPlugin(ScrollTrigger, Flip); const main = document.querySelector(".small-grid"); const blue = document.querySelector(".title-sticky-wr"); const boxes = gsap.utils.toArray(".grid-item-wr"); function flipBoxes(target, container) { let state = Flip.getState(boxes); boxes.forEach((box) => container.appendChild(box)); return Flip.from(state, { scale: true, ease: "power3.out", duration: 1, stagger: 0.2 }); } ScrollTrigger.create({ trigger: "#one", start: "top top", end: "bottom bottom", // ScrollTrigger end parameter changed onToggle: self => { if (self.isActive) { flipBoxes(blue, main); } } }); ScrollTrigger.create({ trigger: "#one", start: "bottom top", // ScrollTrigger start parameter changed end: "top bottom", // ScrollTrigger end parameter changed onToggle: self => { if (self.isActive) { flipBoxes(main, blue); } } }); Hello guys, I havethis code which reparents the grid-item-wr on scroll with Flip library from main to blue on scroll and when we scroll up again, it reparents the grid-item-wr once again from blue to main. But not working!