Search the Community

Hi, I created a minimal reproduction of a stacked panels effect using multiple pinned elements with `pinSpacing: false`. The effect works correctly while scrolling normally. However, there is an issue when refreshing the page while being inside the stacked section: - Panels 2, 3 and 4 remain correctly positioned - Only the first panel gets misplaced and appears to restart from inside the stack Important notes: - Panels have variable heights - There is a section before and after the stack - No scale animation is used, only vertical stacking - Each panel is pinned individually with `pinSpacing: false` ⚠️ Note about reproduction: This issue is related to scroll restoration on page reload. It is not always reproducible inside the standard CodePen preview because it resets the scroll position. To properly reproduce: 1. Open the demo in a standalone page (or locally) 2. Scroll into the stacked panels (around panel 2 or 3) 3. Refresh the page 4. The first panel will be misplaced Here is the demo: https://codepen.io/Kinsi/pen/vEXVBgg I would like to know if this behavior is expected with this pattern, or if there is a more robust way to structure the ScrollTriggers. Thanks! I can also provide a standalone HTML file if needed.

Hello everyone, I'm trying to make a clone of this website: Velozão | Galeria de Carros JDM Currently, I'm trying to make the infinite scroll and image scale down on scrolling but when it got to the end it got stuck, which I don't know why I have created a stackblitz link here: Demo StackBlitz It seems to work well on StackBlitz, but in my local, it doesn't. Here is the video I recorded: demo Btw, if you guys know how to do the hover pixelate image, please let me know; I would appreciate it. If anyone has run into something similar or has ideas on how to fix this, I’d love to hear your thoughts. Thanks!

Transform_1080p_202601281826_V1.mp4 I have image sequences for logo Transform_1080p_202601281826_V1.mp4

Hi My STACKBLITZ: https://stackblitz.com/edit/react-tbctyjhz?file=src%2FApp.js I seem to be having a logic issue between multiple video scrolltriggers. In my STACKBLITZ example, you can see in my App.jsx, I have: "Introveal", words fade in automatically, then fades out as you scroll "Aerial", fades in, video schrubs, and title appear, then video fades out all good up to this point But I will have multiple "Aerial" type video scrollers with titles, so to simulate it I just duplicated the "Aerial" component for a total of 3 of them in my App.jsx Now I have a weird problem that I'm not sure how to solve. The fading in/out between the IntroReveal/(1st Aerial), works great as the one fades in as soon as the previous fades out. BUT, this is the issue, in the case of the Aerial, duplicated few times as I have it, there seems to be a 100vh between them. IE you have to scroll a lot after the 1st one fades out, before the next one starts fading in. I'm not sure how to fix that, without messing up the timings elsewhere, since as I say after the Introreveal, all is good. AFTER the last, Aerial fades out, the dummy content I added there also comes in fine at correct time.

Hi guys and gals, I am using the approach here using scrollTrigger and scrollTrigger observer from this thread My problem is if I have an anchor button on the start that is an anchoring to another section that is after the animation, it is getting caught in the scrollTrigger observers pin. From what I have read, the ScrollTo is suppose to bypass the animation right?

Hello, I have two problems/issues: 1. Google Chrome sometimes does not render well 1px solid borders - i have a list of three columns and within them there is a element that has 1px solid border, in two of them the border looks glitchy like thicker that it should be. In the other one "thiner" looks like it should be without any glitches. Additionally this is random.. its not always the same ones rendered wrongly.. The code set up for this is: .section__fade-in-group > * { opacity: 0; will-change: opacity, transform; visibility: hidden; transform: translateY(-20px); } if (section.querySelector(".section__fade-in-group")) { sectionTL.to( section.querySelector(".section__fade-in-group").children, { autoAlpha: 1, y: 0, duration: 0.75, stagger: 0.15, ease: "expo.out", }, section.querySelector(".section__content") ? "-=0.5" : "" ); } So the animation is pretty simple.. Does anyone know why is that happening? 2. The second problem is the Firefox, i have a lot of similiar animations like in point 1 but in Firefox they are a bit jittery - not as smooth as in Google Chrome. For example: I have this animation for full width hero image: const imgCover = heroBanner.querySelector(".img-cover"); heroBannerTL.fromTo( imgCover, {y: -20, scale: 1.1}, { y: 0, scale: 1, opacity: 1, duration: 1.5, ease: "power3.out", } ); I have tried will-change and stuff but nothing helps.. is there anything that could smoothen? UPDATE: I have tried this: // Fix: pixel-snapping that Firefox applies for some reason during rendering (totally unrelated to GSAP). rotation: 0.1, and seems like it helped. thanks guyz!

i am trying to create an effect where the card has an intro animation, then it has a certain arrangement and after some time has an outro animation. i want everything to be on a scrub. for the positioning of the elements i have tried to use the flip plugin. but i can't seem to make multiple ones work on scrub. everything seems to be playing all at once.

Hi, I need some help with a split-text animation. I’m animating split text on scroll with staggered effects. The animation works as expected when scrolling down, but when scrolling back up, the first letter (or word) does not appear. I would like to understand why this is happening. Thank you.

I’m trying to recreate the scroll-driven cards animation used on https://www.garcy.studio/ Target behaviour (reference attached via screenshot): Cards start offscreen (bottom / slight right). On scroll, the whole cards wrapper moves diagonally (up + left). Once the first card fully enters the viewport, the wrapper pins. While pinned, cards translate horizontally in a smooth, continuous way. No jumps, no resets, and no sudden position corrections after pinning. I’ve attached screenshots of the reference animation and shared a minimal CodePen demo showing the issue. Please help me here.

Hello everyone, I am extremely new to GSAP, and want to create an animation where, when the user scrolls, "Web design" shows on the center, as they continue scrolling, it splits to show the description inside (top shows top/half on web design, bottom shows bottom half, ccntent in the center, max width being that of the title). As they continue scrolling, "Graphic Design" scrolls in horizontally (from the right), pushing "Web design off screen (to the left). On continued scroll, it too splits to reveal the description. On scroll, Graphic design scrolls left, off screen, and scrolling moves on to next section of the website. I achieved part of it; however, there is a weird jump as each stage scrolls off screen, and a long delay between Web Design scrolling off screen, and Graphic Design scrolling in. Below is my code. How can I make it not have such an empty gap? Things to note: 1. I am doing this in a Wordpress installation, using Elementor Pro plugin 2. I'm adding the GSAP as custom code under </body> 3. Looks very broken in CodePen

Hello I have a problem with my scroll trigger animations. i want to make a pin panel animation that would stack my page_sections. and inside of each page section there will be scroll trigger with its own animation. i made this far that if in my Home component enable pin spacing on true the animations work but the panels are not stacking like if pinSpacing is false. But i cant figure out how to make it work that i would pin the element and make the animation like: hero anim -> 1 parallax section -> hotspot anim -> 2 parallax section -> and so on... now i am getting hero anim and 1 paralax section at the same time. and then hotspot anim and 2 paralax section at the same time. and because of that not all animations are seen.

Hello. I need help with an implementation. All sections need to be pinned, and additionally, the first section should have pinSpacing for an extra animation, as shown in the GIF. My searches, unfortunately, have not been successful. Maybe there is a way to achieve this.

Hi, When scrolling throw the container, they are being pinned and stacked on top of each other, but as soon as they are unpinned, the containers are transformed/moved out of place. The codepen showcases the issue I am facing. Thanks!

Hi everyone! I need some help. I want to recreate the words-carousel section like on the site: https://c2montreal.com/ It's a section with three titles Learn, Experience, Connect. Section is full screen and on scroll have SplitText in some like roller/carousel effect. Here is my CodPen (scroll): https://codepen.io/NGrdanjski/pen/XJXwyOq Thank you very much everyone.

Hi GSAP Community, I am currently facing an irresolvable issue with GSAP, which leads me to believe my approach is fundamentally flawed. The specific problem lies in the implementation of horizontal scrolling within my section2 element. When I attempt to pin this section to prevent its exit from the viewport, it causes the subsequent elements below to manifest prematurely. My objective is to have the viewport's scroll locked upon entering section2, thereby enabling a horizontal scroll through its internal elements. Once this internal scroll sequence is complete, the viewport's vertical scroll should resume, allowing the subsequent sections to enter the view in their natural order. Thanks in advance!

Hey, I'm trying to apply a zoom masking effect where, as I scroll down, the text scales up. But when I scroll back up quickly, the masking doesn't align properly with the scroll speed.

It doesn't work with a regular anchor, and if you use scrollTo, it doesn't scroll all the way to the end. Is there a way to make the scroll perfect to the desired element? Or at least within a couple dozen pixels?

Hi, thank you for your help!. I'm struggling on only IOS. I tested on Macbook, Samsung, GooglePixel8, they got no issue at all except IOS (Iphones). . Behavior, I used everytime when `scrollTrigger.refresh()` got executed on IOS (Tested on Iphone11). I will have a mini-lag. So, I've tested on 9 years old Samsung and I got no issue at all. . So, everytime when I use scrollTrigger + scrub for increasing my element's width and height. The current width and height in scrollTrigger won't update their size (checked by markers). So, I've to use `scrollTrigger.refresh()` to fix this OR open dev tools to update the viewport again. It will get more worst when I need to use onUpdate + `scrollTrigger.refresh()` . This is how my code looks like (So, without onUpdate e.g. onStart or onComplate. They will also appear this bug as well only on IOS). if (window.innerHeight > window.innerWidth) { gsap.to(".aboutVideo", { scrollTrigger: { trigger: ".about__video", start: "bottom bottom", end: "center end", scrub: 0.5, }, onUpdate: () => { ScrollTrigger.refresh(); }, }); } I have the Netlify link for testing, but I would like to share it once when it’s done. I’d love for GSAP to consider it for a “Site of the Day” feature or something like that. I really want to show it to them, but I’m afraid that if I share it now, they might not consider it. Here is my link: https://everymatrix-porchelab.netlify.app/ ( I don't care anymore😞) My full code is here //Dependencies import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import SplitText from "gsap/SplitText"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, TextPlugin); const InitLogic = () => { const historyTimeline = [ { title: "The Visionary Engineer", description: "“In 1931, Ferdinand Porsche founded a firm built on innovation and driven by passion.”", }, { title: "The First Porsche Legend", description: "“In 1948, Ferry Porsche built the 356, the first Porsche born from pure passion.”", }, { title: "The Designer of Legends", description: "“In 1963, Butzi Porsche shaped the 911, defining timeless performance.”", }, { title: "Porsche in the Spotlight", description: "“In 1970, Porsche ignited the world’s tracks; performance pulsed in its DNA.”", }, { title: "Breaking Boundaries", description: "“In 1986, the 959 fused technology and speed, redefining every limit.”", }, { title: "A New Era (2000s)", description: "“In 2002, Porsche entered new roads, blending sport and daily life seamlessly.”", }, ]; //===================================================================================== useGSAP(() => { //ScrollTrigger gsap.to(".homepageContent", { scrollTrigger: { trigger: ".homepageHero", start: "bottom 100%", end: "bottom 65%", scrub: 0.5, }, backgroundColor: "white", duration: 1, }); gsap.fromTo( ".section__about", { backgroundColor: "black", color: "white" }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 100%", end: "bottom 65%", scrub: 0.5, }, backgroundColor: "white", color: "black", duration: 1, } ); gsap.fromTo( ".homepageHero", { opacity: 1 }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 100%", end: "bottom 60%", scrub: 1, }, opacity: 0, filter: "blur(5px)", backgroundPositionY: window.innerWidth < 1024 ? "80%" : "300%", } ); gsap.fromTo( ".homepageHero__videoBG", { opacity: 1 }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 100%", end: "bottom 60%", scrub: 1, }, opacity: 0, filter: "blur(5px)", y: "-10%", } ); gsap.fromTo( ".aboutText1", { y: -700 }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 60%", end: "100% -30%", scrub: 0.4, }, y: 250, } ); gsap.fromTo( ".aboutText1", { opacity: 0 }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 60%", end: "100% top", scrub: 0.4, }, opacity: 1, } ); gsap.fromTo( ".aboutImage1", { y: -500, opacity: 0 }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 60%", end: "100% -30%", scrub: 0.4, }, y: 250, opacity: 1, } ); gsap.fromTo( ".innerAboutImage1", { width: "90%" }, { scrollTrigger: { trigger: ".homepageHero", start: "bottom 60%", end: "100% -30%", scrub: 0.4, }, width: "100%", } ); //Container2 gsap.fromTo( ".aboutContainer2", { y: 100, opacity: 0, zIndex: 1 }, { scrollTrigger: { trigger: ".aboutContainer2", start: "top 75%", end: "top center", scrub: 0.4, }, y: 150, opacity: 1, } ); gsap.fromTo( ".innerAboutImage2", { width: "95%" }, { scrollTrigger: { trigger: ".aboutContainer2", start: "top 75%", end: "top center", scrub: 0.4, }, width: "100%", } ); gsap.fromTo( ".aboutText2", { y: 150, opacity: 0 }, { scrollTrigger: { trigger: ".aboutContainer2", start: "top center", end: "bottom 50%", scrub: 0.4, }, y: 0, opacity: 1, } ); gsap.fromTo( ".aboutVideo", { y: 20 }, { scrollTrigger: { trigger: ".aboutVideo", start: "bottom bottom", end: "bottom top", scrub: 0.4, }, y: 50, } ); gsap.fromTo( ["body", ".section__about"], { backgroundColor: "white" }, { scrollTrigger: { trigger: ".section__about", start: "bottom top", end: "top bottom", scrub: 0.4, }, backgroundColor: "black", } ); gsap.fromTo( [".section__about", ".homepageContent"], { background: "white" }, { scrollTrigger: { trigger: ".about__video", start: "center bottom", end: "end end", scrub: 0.4, }, onStart: () => { ScrollTrigger.refresh(); }, backgroundColor: "black", } ); gsap.to(".aboutVideo", { scrollTrigger: { trigger: ".about__video", start: "bottom bottom", end: "end end", scrub: 0.4, }, width: "100%", height: "100vh", }); //Fixing bug if (window.innerHeight > window.innerWidth) { gsap.to(".aboutVideo", { scrollTrigger: { trigger: ".about__video", start: "bottom bottom", end: "center end", scrub: 0.5, }, onUpdate: () => { ScrollTrigger.refresh(); }, }); } // gsap.to(".innerAboutImage2", { scrollTrigger: { trigger: ".innerAboutImage2", start: "80% bottom", end: "bottom start", scrub: 0.4, }, translateY: "-15%", }); // loadingScreen gsap.to( [ ".loadingscreen__background--porsche", ".loading1", ".loading2", ".loading3", ".loading4", ], { x: "-100%", opacity: 0, duration: 0.3, delay: 0, ease: "power4.out", stagger: 0.1, onComplete: () => { gsap.to(".loadingscreen__container", { display: "none", }); }, } ); gsap.fromTo( ".nav__item.nav__item--logo", { opacity: 0.001, y: -60 }, { opacity: 1, y: -30, delay: 1, duration: 1, ease: "back.out", } ); gsap.fromTo( ".nav__item--hamburger", { opacity: 0.01 }, { opacity: 1, delay: 1.25, duration: 0.5 } ); gsap.fromTo( ".article__title", { opacity: 0.01, y: 20 }, { opacity: 1, y: 0, delay: 0.5, duration: 0.75 } ); gsap.fromTo( ".article__description", { opacity: 0.01, y: 20 }, { opacity: 1, y: 0, delay: 1, duration: 1 } ); gsap.to(".historySection__explaination", { opacity: 1, color: "#fff", scrollTrigger: { trigger: ".historySection__explaination", start: "center center", end: "5% top", scrub: 1, }, }); gsap.to(".historySection__explaination", { scrollTrigger: { trigger: ".historySection__explaination", start: "center center", end: "+=4000px top", scrub: 1, pin: true, }, }); historyTimeline.forEach((element, index) => { // animate image zoom & fade gsap.to(`.historyImage${index}`, { scrollTrigger: { trigger: `.historyImage${index}`, start: "top 70%", end: "bottom top", scrub: 0.4, }, onComplete: () => { ScrollTrigger.refresh(); }, opacity: 1, filter: "blur(0px)", width: "60%", }); // set initial title & description to first timeline gsap.set(".historySection__title", { text: historyTimeline[0].title, opacity: 1, }); gsap.set(".historySection__description", { text: historyTimeline[0].description, opacity: 1, }); // change text dynamically when each image becomes active ScrollTrigger.create({ trigger: `.historyImage${index}`, start: window.innerHeight > window.innerWidth ? "30% 70%" : "top 70%", end: window.innerHeight > window.innerWidth ? "bottom center" : "bottom top", scrub: 0.3, onEnterBack: index === 0 ? () => { gsap.to(".section__about", { backgroundColor: "#000", }); } : undefined, onToggle: (self) => { if (self.isActive) { gsap.to( [".historySection__title", ".historySection__description"], { opacity: 0, duration: 0.2, onComplete: () => { gsap.to(".historySection__title", { text: element.title, duration: 0.2, delay: 0, ease: "power2.out", opacity: 1, }); gsap.to(".historySection__description", { text: element.description, duration: 0.2, delay: 0, ease: "power2.in", opacity: 1, }); }, } ); } }, }); }); gsap.to(".historySection__historyContainer", { opacity: 0, duration: 1, ease: "power2.inOut", scrollTrigger: { trigger: ".historyImage5", start: "center center", end: "bottom 25%", scrub: 1, }, }); gsap.to(".historyPresent__presentEraImg", { opacity: 1, duration: 1, ease: "power2.inOut", scrollTrigger: { trigger: ".historyPresent__container", start: "top center", end: "top top", scrub: 1, }, }); gsap.to(".historyPresent__presentEraLogo", { filter: "brightness(0) invert(1) blur(0.5px)", opacity: 1, duration: 1, ease: "power2.inOut", scrollTrigger: { trigger: ".historyPresent__container", start: "top center", end: "top top", scrub: 1, }, }); gsap.to(".historyPresent__container", { scrollTrigger: { trigger: ".historyPresent__presentEraImg", start: "top top", end: "+=3000px bottom", scrub: 0.3, pin: true, }, }); gsap.to(".historyPresent__presentEraLogo", { filter: "brightness(0) invert(1) blur(0)", top: "10%", ease: "power4.in", scrollTrigger: { trigger: ".historyPresent__presentEraImg", start: "top top", end: "+=2000px bottom", scrub: 0.3, }, }); gsap.to(".historyPresent__presentEraChangingImg", { filter: "blur(0px)", ease: "power4.in", scrollTrigger: { trigger: ".historyPresent__presentEraImg", start: "top top", end: "+=2000px bottom", scrub: 0.3, }, }); gsap.to(".historyPresent__presentEraChangingImg", { opacity: 1, ease: "power4.in", scrollTrigger: { trigger: ".historyPresent__presentEraImg", start: "top top", end: "+=2000px bottom", scrub: 0.3, }, }); gsap.fromTo( ".historyPresent__presentEraMessage", { opacity: 0, y: -20 }, { filter: "blur(0px)", ease: "power4.in", opacity: 1, y: 0, scrollTrigger: { trigger: ".historyPresent__presentEraImg", start: "top top", end: "+=2000px bottom", scrub: 0.3, }, } ); gsap.to(".historyPresent__container", { opacity: 0, filter: "blur(5px)", scrollTrigger: { trigger: ".chooseCar__container", start: "top bottom", end: "top center", scrub: 0.3, }, }); gsap.to(".chooseCar__openingMessage", { color: "#fff", filter: "blur(0px)", scrollTrigger: { trigger: ".chooseCar__container", start: "top 60%", end: "top top", scrub: 0.3, }, }); gsap.to(".chooseCar__carList", { opacity: 1, filter: "blur(0px)", scrollTrigger: { trigger: ".chooseCar__openingMessage", start: "top 60%", end: "top top", scrub: 0.3, }, }); }, []); //History section useGSAP(() => { document.fonts.ready.then(() => { const split = new SplitText(".historySection__headLine", { type: "words", aria: "hidden", }); gsap.fromTo( split.words, { opacity: 0, y: 30 }, { opacity: 1, y: 0, ease: "none", stagger: 0.1, scrollTrigger: { trigger: ".historySection__headLine", start: "bottom bottom", end: "center 35%", scrub: 0.4, }, } ); gsap.to(".historySection__historyHR", { opacity: 1, y: 0, ease: "none", stagger: 0.1, scrollTrigger: { trigger: ".historySection__headLine", start: "600% bottom", end: "center 20%", scrub: 0.4, }, width: "100%", }); gsap.to(".about__video", { opacity: 0, scrollTrigger: { trigger: ".historySection__headLine", start: "bottom bottom", end: "top 25%", scrub: 0.4, }, onStart: () => { ScrollTrigger.refresh(); }, }); }); }, []); return <></>; }; export default InitLogic;

Hello, just wanted to share that my new folio is now live at https://www.thomasthorstensson.com A big thanks to the team at GSAP for their work on ScrollTrigger and Draggable—two libraries that play a core part in this project. Anyone interested in how I implemented these, in a Nuxt SSR environment, follow the link on my folio to my GitHub. 😎 Thanks, .T

hey there hope you guys are having a good day , i have a scenario which i should animate a element in while it has a scroll trigger and scrub lets say the loading state ends and then the box should animate from its original position to some where lets say { y : 0 } -> { y : -100}. the problem is i want this element to also have this animation with scroll trigger and scrub to true , i searched a lot for the possible ways but none of them worked smoothly until i found this and added a little code to control my animation with it but it might gets a little bit laggy if the user scrolls fast since the onUpdate on gsap tween which i wrote might doesn't run smoothly , does any one have any better solution to achieve my goal ?

In short, I've employed ScrollSmoother and ScrollTrigger in my NextJS portfolio, but when I have Chrome/Edge devtools open and my app is refreshed (like when I've made a change in dev), the smooth scrolling stops. This wouldn't be the biggest deal if all that changed was the "lag" applied in scrolling, but other features that accompany SmoothScroller, like parallax and ScrollTrigger, begin to break down. Resizing the window given these conditions results in strange placement of any ScrollTriggers' markers. Moreover, I recently noticed that switching display orientation on mobile results in the same problem (just as is, not even in DevTools), if this helps diagnose my problem. It was one thing for it to affect my experience as a dev, but another now that I see the final product impacted, so any pointers would be greatly appreciated! The CodeSandbox demo I have linked below is a barebones React Project with the same component "SmoothScrollOverlay.tsx" that I use in my actual project. It's set up like this in my actual project because as mentioned, I'm using NextJS, so I separate GSAP from the page for SSR purposes. Do let me know if I'm abusing any bad practices in doing such. For context, I'm a student and new Software Engineer still building on my knowledge of React, let alone GSAP now, so if I've missed obvious things in the docs/forums, I apologize. It's been hard to combine my knowledge in both as I've struggled to find many resources that fit my goals, so if someone could push me in the right direction or link projects I could look at, I would greatly appreciate it! Thank you! https://codesandbox.io/p/sandbox/hjdqmr (code) https://hjdqmr.csb.app/ (replicate bug here. If needed, I can link a video of the bug as well)

Hi, Im quite new to gsap, and wanted to create an animation that will show following animation i wanna create. 1)Basically it is a card stack type of animation 2)When each 「.mv-wrap」 reach their own respective「 strollTrigger : 'center center'」condition, 「.mv-overlay」will trigger and opacity change to 0.6. 3)Then 「.mv-wrap」 reach their own respective「 end」condition, 「.mv-blur」will trigger and 「filter: blur」 will apply effect to mv-blur. 4)Finally, text will scroll up until it reach the top its respectione 「.mv-wrap」top. I have been struggling for few days and yet cannot write the code i wanted to apply. Can someone help? *sry for my bad english https://codepen.io/Charles5BLueER/pen/QwyOYMg

I’m seeing strange behavior in ScrollTrigger when I initialize the scroll triggers below the markers. I’ve created this simple demo to reproduce the issue I’m seeing in my larger project. Please click the "Scroll to Info" button first, then after scrolling, click the "Init" button to set up the scroll triggers. After initialization, slowly scroll up until you see the green box like in the image below. Notice that it is not at the correct position and when passing the orange marker it jumps to the end position and then plays in the correct way like it does when the initialization is done at the top of the page. Can anyone please explain why I am seeing this behavior and how to work around this.

Building on top of my previous scroll-based carousel, I'm working to make the carousel draggable/scrollable on mobile devices. Currently I've tried two approaches: ScrollTrigger (Snap Property) scroll-snap demo Pros Already compatible with mobile scrolling Animations are spaced will between snap points Cons The scroll snapping doesn't centre the cards The snapping behaviour isn't "snappy" like native snapping. Even with the snap options (object). Scroll snap demo --- Drag + Inertia Plugin (Snap function) Pros Has great snapping Great inertia control Also works on mobile devices Cons Repositions (TranslateX) the element instead of scrolling it. This leaves sibling elements behind and follow the dragged item. When a container is dragged then scrolled (via arrow nav buttons), it goes way beyond the boundaries. Unknowns I'm not sure how to prevent or limit "throw dragging". When done on snapped drags, the script doesn't know which one to snap to. Dragging Demo --- I feel the ScrollTrigger method would be better but I'm not sure how to achieve what I aim to do.

Following Snorkl.tv's 3D Flip tutorial, 3D flip tutorial I'm building a carousel that flips cards onto the front face when centred in the viewport. Essentially, I'm trying to get it to behave like Revolut's card switcher. In my demo, I can't seem to fine tune the spin animation of the cards based on the scroll distance. I've tried playing with the timeline repeat value + scrollTrigger's start and end values. In this instance, I discovered that matching the repeat to the number of cards almost makes it perfect. Each button click scrolls the slide container by 180px. Based on this scroll distance, I want the animation to reach it's halfway point (180º flip). Is this possible?