Jump to content
Search Community

Search the Community

Showing results for tags 'flip'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

  1. RRDevs

    Flip animation

    Hello everyone! Could you, please, help me with a flip animation. I was trying to make the hero section I have have a plus here, the contents will be removed when the section is pinned, only the plus will not be removed, the plus will be centered from the left and the center will be centered from the top, then it will be full screen and a section will come out of it.
  2. I'm attempting to replicate the "One Element Scroll" animation from Tympanus.net (https://tympanus.net/Development/OneElementScroll/) using GSAP Flip.fit within a NextJs. However, i'm experiencing an issue where the width and height of the element with the class .one flicker between its full size and the final size set by Flip.fit. Minimal reproduction : i've created a simplified NextJs project on StackBlitz to isolate the issue: https://stackblitz.com/edit/stackblitz-starters-dykskccl?file=app%2F_components%2Fmain.tsx
  3. Hello, I'm trying to create an animation where three blocks/boxes move into a target container (upon scrolling, but not important for right now). The target container (end state) consists of six boxes arranged in a CSS grid layout, resembling a typical dashboard with sections for a sidebar, two top items, and three bottom items. Initially, in the starting container (start state), only three of these six boxes are positioned at the bottom of the screen but inside a separate div. The goal is to trigger an animation on scroll or scrub the animation whilst scrolling, transitioning the boxes from their starting positions into their respective locations in the target container's grid layout. I've spent several hours trying to implement this functionality and even attempted using Cursor, but without success. If anyone could point me to a simple tutorial, demo, or example showcasing how to achieve this type of animation, I would greatly appreciate it. Attached below are some screenshots illustrating the intended animation and layout. Additionally, here's a snippet of the initial code I worked on, though I ended up removing parts of it after facing persistent issues. https://codepen.io/joebentaylor/pen/PwYEWVx?editors=0010 (please scroll down on the codepen to see what im intending to do) Thank you in advance for your help!
  4. I'm working on a site and am wanting the logo to transition into the navbar on scroll. For some reason I've been running into a lot of bugs and can't get it to work correctly. Any help would be appreciated. I was originally trying to get it to work using a scrolltrigger scrub animation but that was having even more issues. The site is here: https://lvly-tv.webflow.io/ and the code I'm using is below: Any help would be appreciated. const homeLogoScroll = function () { const logo = document.querySelector('.hero_home_logo'); // const logoChildren = logo.querySelectorAll('*'); const heroLogoWrap = document.querySelector('.hero_home_logo_wrap'); const navLogoWrap = document.querySelector('.nav_logo'); const heroSection = document.querySelector('.hero_home_wrap'); if (!logo || !heroLogoWrap || !navLogoWrap) return; const updateLogo = function (moveToHero = false) { let state = Flip.getState(logo, { nested: true }); //move element if (moveToHero) { heroLogoWrap.insertAdjacentElement('beforeend', logo); } else { navLogoWrap.insertAdjacentElement('beforeend', logo); } // animate element Flip.from(state, { absolute: true, // scale: true, duration: 0.6, ease: 'power1.inOut', }); }; updateLogo(true); let tl = gsap.timeline({ scrollTrigger: { trigger: heroSection, start: 'center 45%', end: 'bottom 100%', scrub: true, markers: false, onEnter: () => { updateLogo(false); }, onEnterBack: () => { updateLogo(true); }, }, }); };
  5. https://chimetrendspro.wpenginepowered.com Tough to describe this problem, but if you go to that url, scroll down to elemental table looking section, click the bottom row (makes them bigger and upper panels smaller) and vice versa when clicking the top row after that. It doesn't animate between the 2 states - unless you click top or bottom rows quickly during the time they're supposed to animate - then they animate. Here's the initial CSS + code that happens on click: --view-size: clamp(0px,50rem,1920px); --item-size: calc(var(--view-size)* .18); --item-size-clamp: clamp(191px, var(--item-size), 16vw); --item-spacing: calc(var(--item-size-clamp)* .05); /* Big State */ #trend-dfg .dp-dfg-item.big-state { width: var(--item-size-clamp); height: var(--item-size-clamp); } /* Small State */ #trend-dfg .dp-dfg-item.small-state { width: calc(var(--item-size-clamp)* .475); height: calc(var(--item-size-clamp)* .475); } $('#trend-dfg .dp-dfg-item:nth-child(-n+10)').addClass('big-state'); // makes first 10 items big $('#swap-click').on('click',function() { $('#trend-dfg .dp-dfg-item').toggleClass('small-state big-state'); // toggles big to small, small to big console.log('swap click'); let state = Flip.getState(".dp-dfg-item"); Flip.from(state, { duration: .5, stagger: 0.07, absolute:true, nested: true, ease: "power4.out" }); });
  6. When i add scale:true to the flip anim all the childs starts distorting, some things i need to achieve are - 1. I need to use scale to get the spring easing to work, which doesn't work with width/height or would be expensive to run. 2. I am using w/h in css styles instead of scale because in production code i'm using a JS framework to change reactive state, which triggers the layout change so it's not possible to know the dimensions or position beforehand. https://codepen.io/XYLIS-333/pen/NWQzNwB
  7. gonghaibo

    Flip element misalignment problem

    Hi, I am a newbie to gsap. When I found the flip plugin, I was so surprised. It was amazing. But after my exploration, I found that there would be a slight misalignment here. How can I solve it? Currently, I found that the only way is to increase the delay, but this is not perfect. I have been working hard for two weeks on this problem and have not found a suitable solution. My Expectations this is my codesanbox https://codesandbox.io/p/sandbox/gallant-neco-vnq8j8
  8. Hi I want to create a Flip from the header to a new page like this website But when I click it don't append the child to the container I can't access to codepen in my country So I have created a stackblitz page instead
  9. subham0889

    Simple gsap flip not working

    i've been trying to create this very straight forward gsap flip anim in svelte, but it's giving this error in console. tick() is used to wait for DOM updates in svelte. Here's the demo - https://stackblitz.com/edit/stackblitz-starters-bcg4gd?file=src%2Froutes%2F%2Bpage.svelte
  10. 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!
  11. 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!
  12. Poora

    Animate Tabs

    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> ); }
  13. 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!
  14. 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?
  15. 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!
  16. Yuri Silva

    GSAP Flip animation jumping

    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?
  17. Fettahaud

    Change text content smoothly

    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.
  18. Bartholomey

    Viewport jumps when content height flips

    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" }); } },
  19. 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
  20. 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
  21. 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.
  22. 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!
  23. 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.
  24. 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.
  25. Supachai

    Grid item view in React.js

    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?
×
×
  • Create New...