Search the Community

Hi all, I've been building up some work with GSAP, but I'm struggling a little bit regarding some logistics in Flip. What I'm trying to achieve is a looping carousel that applies transforms based on the positions of items in relative to the central item. I've been trying to take from the Card Loop demo, but I seem to be having a hard time controlling the DOM. Via logging, I've determined that there's some issue where I'm animating the items before the duplicate is removed, which then tries to set up the active item based on an inaccurate number of items. The animation also appears to be a bit jumpy, which I'm also confused about. Any pointers or solutions would be greatly appreciated!

I know I should have looked more first... the "error" is not coming (directly) from GSAP. What's happened is that the page has some areas that have carousel sliders inside them. These sliders get set up after the page it set up, so that's after GSAP and ScrollTrigger sets up it's systems. The result of that is that ScrollTrigger is working with dimensions from before the carousel items are set up as a carousel, which makes them a lot larger and take up a lot more room on the page. The slider code then kicks in and condenses it all, but GSAP doesn't know about that, so keeps the original dimensions. The work around that I've come up with is to call ScrollTrigger.reset() after the sliders initialised. This resets the ScrollTrigger values and everything goes back to working correctly again. If anyone has a better way to do this I'd love to hear it, but for now I've got it sorted out and working.

I was trying to replicate the banner section of this website https://www.osmo.supply/ , I was able achieve something close but it is not perfect and then again the question how can i make something like this responsive also my carousel is not ending at the end of the section like in the website. Can you guys please tell me what am i doing wrong in this implementation and what can be improved. I have also attached a codepen demo of what i was able to make https://codepen.io/xgpzkmse-the-sans/pen/dPMjEJj

Hi everyone. I am having a problem with my scroll restoration when it comes to using scrollSmoother and pinning a section (diagonal-carousel). Whenever I refresh the page anywhere in the diagonal carousel and below, the scroller loses its position and restores it at the beginning of the carousel. https://codepen.io/mamadtahsiri/pen/ByzPRPw

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.

Just one more problem. The header only remains in place when I refresh the page once I reach the diagonal carousel. Obviously something is not loading properly in the JavaScript that is causing this but I don't know what. I tried putting ScrollTrigger.refresh(true); right before the diagonal carousel but it didn't work this is the Javascript gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother = ScrollSmoother.create({ wrapper: '#scroll-wrapper', content: '#scroll-content', smooth: 1.7, // effects: true }); let button = document.querySelector('.hero-scroll-btn'); button.addEventListener("click", (e) => { smoother.scrollTo(".site-header", true, "top top"); }); // Pin the header at the top once it reaches there (replaces CSS sticky) ScrollTrigger.create({ trigger: ".site-header", scroller: smoother.wrapper(), // or "#scroll-wrapper" start: "top top", endTrigger: "max", end: "bottom bottom", pin: true, pinSpacing: false }); window.addEventListener("load", () => { if (typeof gsap === 'undefined' || !document.querySelector('.carousel-track')) return; gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); // logo fade in tl.to("#loader-logo", { opacity: 1, scale: 1, duration: 1.2, ease: "power2.out" }); // fade out preloader tl.to("#preloader", { opacity: 0, duration: 1, ease: "power1.out", onComplete: () => { document.getElementById("preloader").style.display = "none"; document.getElementById("content").style.display = "block"; // Show the content after preloader } }, "+=2.5"); requestAnimationFrame(() => {//Giving appropiate time for the content with animation (carousels) to be visible requestAnimationFrame(() => { ScrollTrigger.refresh(true); // Force a full refresh // Initialize carousel animations AFTER content is visible and measurements are correct if (typeof initCarouselAnimations === 'function') { initCarouselAnimations(); } }); }); // ROLL UP CONTENT tl.fromTo("#content", { opacity: 0, // y: 100 // Start 100 pixels below its final position }, { opacity: 1, // y: 0, // End at its original position duration: 3, ease: "power3.out", clearProps: "y,transform", // Only clear transform, keep opacity:1 (CSS has opacity:0) onComplete: () => { // Set opacity directly on the element to override CSS document.getElementById("content").style.opacity = "1"; } } ); // Diagonal Scroll Case Carousel const diagonalSection = document.querySelector('.diagonal-carousel'); if (diagonalSection) { const diagonalTrack = diagonalSection.querySelector('.carousel-track'); // Helper functions to recalculate values on resize const getTrackWidth = () => diagonalTrack.scrollWidth; const getXMove = () => -(getTrackWidth() - window.innerWidth); const getYRise = () => { const angleInRadians = 5 * (Math.PI / 180); return getTrackWidth() * Math.sin(angleInRadians); }; gsap.to(diagonalTrack, { x: getXMove, // Dynamic value y: () => -getYRise(), // Dynamic value ease: "none", scrollTrigger: { trigger: diagonalSection, start: "top top", end: () => "+=" + getTrackWidth(), scrub: 1, pin: true, anticipatePin: 1, invalidateOnRefresh: true, } }); } } // Expose the function so it can be called after preloader window.initCarouselAnimations = initCarouselAnimations; // ...existing code... });

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?

Hi there, I'm new to GSAP and new to development in general, I'm coming from Webflow as a designer. Anyhow, I've been trying to make - as the title states - a carousel/slider with all the features I want for UX purposes. I intend on reusing this code on future projects. I the features I set out to achieve are: Smooth motion Draggable for mobile mainly Clickable for desktop mainly Infinite scrolling I have made something that works the way I want using the Infinite Scrolling helper function from the GSAP Docs page and added my own alterations, but I am not sure if this is how it is supposed to be done, since I started with an existing function I might have accidentally "doubled down" on the wrong solution, I would love some pointers to the right direction. I've attached a demo here so everyone can see what I'm trying to get at, it's quite a specific thing I'm looking for so it's really hard to find good information. P.S. I'm very new to coding in general, I absolutely am not expecting a full-on tutorial or anything but even some pointers to like "hey learn this one first" would be appreciated, I'm also not at the stage to fully commit to pure code and will be utilizing a lot of Webflow in the foreseeable future hope this add all the necessary context. Thank you everyone in advance.

Hello! Sorry about my late reply, and thanks for sending all that over - it's been very insightful. Definitely a lot of reading for me to do. I've had a little go at re-doing the animation with the provided links and have got something together. https://codepen.io/tonycre8-the-bold/pen/EagvZzL I guess my only problem is that from a stylistic perspective, I can't set an angle size by preference. Otherwise, I'd have to make sure that the number of items within the carousel itself would match the angle. That and if I don't get the angle & number of items right, there would be spacing on the left like there was in the first demo you introduced. I think that's why I went with Flip, is that I could have the number of items I wanted and then just reorder them as the user scrolls through - on the premise of the Card sort demo I introduced at the beginning of the thread. Although I think it's possible that the performance would get tanked in this kind of scenario - constantly flipping elements on scroll that is. I guess my question from here would be about how you (or others) would tackle that? The balance between stylistic control and logic. So far all these demos rely more on the latter, with little flexibility on the former which is more of what I'm trying to achieve.

Hi, A few things regarding this. When working with Flip, ideally the changes/updates should be working before applying Flip to the Mix. I commented out this from your demo: const observer = Observer.create({ target: window, type: "wheel", onWheel: (self) => { const state = Flip.getState(".box"); moveItem(self); // Flip.from(state, { // targets: ".box", // onLeave: (element) => { // const items = gsap.utils.toArray(".box", container); // container.removeChild(element[0]); // animate(items); // } // }); } }); And this is the result: You should be able to look at the other items with their respective transforms and rotations in order to have this working. Also when I scroll up and down I just keep seeing the first element over and over. My first suggestion would be to get this working without the animation first and then add Flip to the mix. Another suggestion would be to try a different approach for this, using just 3D transforms without Flip, perhaps this article by David DeSandro can help: https://3dtransforms.desandro.com/carousel Also have a look at these demos: https://codepen.io/GreenSock/pen/Jjzyjbm https://codepen.io/GreenSock/pen/xxNgMMz https://codepen.io/GreenSock/pen/eYKWzwv https://codepen.io/GreenSock/pen/RwLepdQ Hopefully this helps Happy Tweening!

I'm trying to get this carousel to be infinite, but still snap in place. Right now it gets to the last slide and scrolls back to the first one. How would I achieve that? It seems like the issue only happens when dragging.

I have a header which I have pinned using ScrollTrigger. To give full context, I had previously pinned the header with a sticky position but since I have applied ScrollSmoother to the entire page, it overrode sticky. Now pinning using ScrollTrigger is working fine however, when it reaches my diagonal-carousel it no longer remains pinned due to the preserve-3d property of transform-style in the diagonal-carousel. I should mention, I have kept the sticky position as I needed to change the top value to -1px And below is the code for my diagonal-carousel. on a final note, i have wrapped the whole html code in scroll-content as I mentioned I wanted scrollsmoother applied to the entire page

Hello everyone. I need to implement a carousel such as on the site I will attach bellow. https://fitonist-app.webflow.io/ This carousel placed after the title "Choose your style" There is a carousel that spins in a circle when scrolling, the only difference is that instead of videos I have images.

Hi everyone, I'm trying to create an infinite carousel following this example by @OSUblake. You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?) I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion. thanks

Hey everyone, I’m trying to recreate this horizontal carousel: https://shorturl.at/j5RlP I'm hitting a wall trying to get it working properly, especially because I’m resizing the carousel items dynamically and that seems to mess up the scroll distance — so I’m guessing the start/end trigger points get offset or desynced. I’ve added a CodePen with two approaches I’ve tried so far https://codepen.io/Ch3po/pen/JojQxra Any pointers on how to tackle this are hugely appreciated!

I have an SVG that loops and appears to scroll infinitely to the left or right with GSAP, by modifying the viewBox values to start it over at the beginning. When I run it on an infinite loop, it works perfectly. However, I'm having trouble turning this illusion of an infinite ribbon into something that can be controlled in a more segmented way. I have a standard carousel - I'm using owl to quickly add a simple carousel to my demo. It loops between three images. When the user clicks the next button, I want the infinite ribbon to move to the left a specific amount that I set and can change, and then stop. When the user clicks the next button again, I want the infinite ribbon to continue moving to the left for another specific amount. When the user clicks the previous button, it should be the same idea, with the ribbon moving to the right instead. Two approaches I've tried, with a CodePen demo for each: 1. Treating the infinite scrolling animation as a timeline that will loop forever, and controlling it with the .play() .pause() .restart() commands. I started with this, but it seems like these were not meant for my use case, because I've only been able to get it to go forwards exactly one loop, an exact multiple of one loop, or go forwards infinitely. I want some finer controls here, for instance to go forwards 1.25 loops each time the next button is clicked, and then to go backwards .5 loops when the previous button is clicked. I would also be happy if it were controlled in terms of seconds, like play the timeline for 1.2 seconds and then pause, each time the button is clicked. https://codepen.io/miltil/pen/WbNXwGB 2. Controlling the viewBox variables to set the exact amount that the ribbon moves forwards or backwards. This seems like the less hacky way, but I can't seem to make the illusion of looping like it does when it's in the timeline. The ribbon will move forwards as I tell it to, but when it's time to loop to the beginning of the SVG, I see it slide backwards, or there's a blank space where it's supposed to be connecting to the beginning of the SVG. I guess I don't fully understand the magic that's happening in the first approach that makes the ribbon appear infinite when the ViewBox value goes up to the maximum value of 2311 and then back to 0. https://codepen.io/miltil/pen/NPWwLJB I really appreciate any help! I tried to be a thorough as possible with my examples but please let me know if I can provide any more information.

Hello, I need help with the following problem: I have a carousel that I want to stay within a .wrap container, which has a maximum height of 500px. However, I want to ensure there is no white space above or below the carousel. Here’s the functionality I’m trying to achieve: The carousel should remain centered in the viewport when the user scrolls. When scrolling, the carousel itself should scroll within the .wrap container. Once the carousel reaches the end of its scrollable content, the user should be able to continue scrolling down the rest of the page.

Hi I'm testing out some infinity text carousel/marquee but im running into an issue with the text keeps overlapping and eventually runs out of text. Im not sure where i'm going wrong? https://codepen.io/Luke-Reynolds/pen/KwMZqXy

Hello, this is my first time using gsap. I want to create an automatic carousel effect like the one in the prototype. There are six kinds of fruits to be displayed, accompanied by changes in the background color and two texts. How should I do all this and make it responsive? I really need help. Thanks. Prototype URL:https://drive.google.com/file/d/1URgUune7O4knUtaoLmiaQ3q7W1jQKIvI/view?usp=drive_link

Hi, I'm trying to develop an infinite carousel of images with different sizes. I was able to create the carousel but I want to be able to drag to move the carousel and when the drag ends the movement resumes. I've seen several tutorials on this blog but it's been difficult to adjust because they don't have different images. Thanks for any help

Hi GSAP community, I’m a beginner with GSAP, and I’ve used the seamlessLoop helper function (with some modifications) to create a carousel that slides automatically every few seconds. I also added custom snapping functionality for Draggable since it wasn’t included in the original helper. The carousel works fine initially, but I’m facing two major issues: Resizing Issue: On the initial window load, the slides are perfectly aligned and animate correctly. However, when I resize the window, the slides go off their positions, and the animation becomes misaligned. This issue is especially noticeable if I resize mid-animation. Important Note: When I don’t use the seamlessLoop function, the slides are perfectly aligned even after resizing, which suggests there’s no issue with my CSS. Dragging Snap Issue: On the first slide, when I drag to the right to go to the previous slide (which is the last slide due to the seamless looping), the carousel slides all the way to the first slide and then snaps. For other slides, the dragging snap works perfectly. Things I’ve Tried So Far: Verified that the issue isn’t caused by CSS by testing without the seamlessLoop function. Checked the distanceToStart and distanceToLoop calculations in the populateTimeline function. They appear to be miscalculated during resizing. Added logging to debug these values and noticed inconsistencies when resizing. Ensured proper cleanup of event listeners like resize and visibilitychange. Experimented with adjusting margins, including the spaceBefore and xPercents arrays, but couldn’t resolve the issue. Here’s the CodePen with my implementation: https://codepen.io/Mohd-Usaid/pen/bNbLBBw Since I’m just a beginner, I’d really appreciate any help or advice on how to resolve these problems. Thank you for your patience and support!

Hi all, I've put together a carousel using the handy dandy horizontalLoop helper function, and everything works great, except that even when I have "draggable: true" set in the options... the dragging doesn't work? What am I missing here? Thanks in advance!

Hi there, Hoping someone out there might be able to point me in the right direction ? My goal is to create a circular carousel/slider with Next & Previous buttons, pretty much the same concept as a traditional slider but in circular format. The onclick of the next button, the carousel would rotate counter clock-wise and snap to next item in carousel. Onclick of the prev button, carousel would rotate clock-wise and snap to the previous item. I'm also hoping to make each item/slide clickable, so the carousel rotates that item/slide to the starting arrow making that slide active. Where I've got to..... I've managed to get the "items/slides" set to an svg circle element using the Motion Path Plugin and have setup two timelines which are actioned on next/prev button clicks. At the moment the carousel animates a full +360 or -360 and the items/slides also animate full +360 or -360 as I'm trying to keep them upright as the carousel rotates. Same as the baskets in the GSAP Ferris Wheel demo here - https://codepen.io/GreenSock/pen/wBbKs. I'm unsure on the steps to getting it to snap to the next or previous item and also how to keep the items/slides upright on rotation. Any help would be much appreciated! Cheers,

Are there any methods of creating a vertical carousel, with the selected item fixed in the center of the screen? I've tried something based on this project, but the results have been unsuccessful. Found alternatives on the forum, codepen didn't give any results either Modifiers Plugin for Infinite Image Carousel - GSAP - GreenSock