Search the Community

Hi Team, Currently I'm figuring out GSAP features in React and curious how to make a gallery page that can do like this image (attached): - XY Axis scroll and draggable - Infinite content - Smooth (Inertia??) When I try to make it with my own, it's not really infinite content and lagging, then the XY Axis not flexible to scroll and draggable (I haven't figure it out until the smooth one). Does anyone can help me to make this kind as an example? Reference: https://truekindskincare.com/gallery

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

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.

Implementing a circular time picker where a line rotates toward the pointer on click with a short tween, and should immediately hand off to drag if the pointer moves. However, when clicking and then quickly dragging, the rotation glitches or remains bound to the tween briefly rather than following the drag instantly. onDragStart appears to fire on simple clicks (tiny pointer movement).

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.

Hi all, I'm using Papaparse to parse a .csv file and generate some "cards" displaying some information (eventually it will be students name and school options). I want to be able to then drag the "cards" and drop them into "containers" (the school classes for next year). The card generation works but I can't seem to make them draggable. There is a "list-item" class for all the "cards". The class is recognised as far as the css is concerned but the dragging doesn't work : see Draggable.create('.list-item'); on line 49 Maybe it's not possible to make a class draggable... I attached a .csv file to demonstrate the card generation. Thanks for your help Philippe Eleves.csv

Hello, I'm trying to achieve a drag animation where I want to bring back each characters after dragging them to their original position using a spring like animation. The character set is actually first animating with Splitext then they become draggable. The HTML: <div class="hero-text-stack"> <h1 class="lora-font-bold">Playground</h1> <!-- will be draggable text layer but first its using Splittext animation to appear --> <h1 class="fixed lora-font-bold">Playground</h1> </div> The JS: // Initialize GSAP timeline for the main text animation const hero = document.querySelector('h1'); const fixedHero = document.querySelector('.fixed'); const heroSplitText = new SplitText(hero, { type: 'lines, chars, words', //mask: 'lines', charsClass: 'hero-char++', reduceWhiteSpace: true, }); tl.from(heroSplitText.chars, { yPercent: 'random([-180, 180])', //xPercent: 'random([-150, 150])', autoAlpha: 0, //rotation: 'random([-130, 130])', stagger: { amount: 1, from: 'random', }, ease: 'power4.inOut', }).to(fixedHero, { autoAlpha: 1, duration: 0.8, }); const heroSection = document.getElementById('hero'); const heroTextStack = document.querySelector('.hero-text-stack'); //gsap.set(heroSection, { perspective: 800 }); const draggableHero = gsap.utils.toArray('.hero-char'); //console.log(draggableHero); draggableHero.forEach((char) => { Draggable.create(char, { type: 'x,y', bounds: heroTextStack, inertia: true, minY: -100, maxY: 200, minX: -100, maxX: 200, lockedAxis: 'x', onDrag: function () { this.deltaX = this.x - this.startX; this.deltaY = this.y - this.startY; console.log(`Dragged: ${this.deltaX}, ${this.deltaY}`); }, onDragEnd: function (event) { const target = event.target; gsap.to(target, { x: this.deltaX, y: this.deltaY, duration: 0.5, ease: 'power4.inOut', }); }, }); }); Code pen URL: https://codepen.io/apeandme/pen/bNdNeQM

Hello, I'm new to the GSAP library, I've been using it for 3 days now and I'm having some difficulties implementing what I want to create. I've read several topics hoping to find a solution to my problem, but I haven't managed to solve it on my own. To get to the point! I'm trying to make a horizontal scroll slider with several possible user interactions, namely the possibility of dragging elements to scroll, the possibility of scrolling via buttons on the right and left of the screen and finally the possibility of scrolling elements with the mouse wheel. My slider seems to be synchronized with the vertical scroll, but the latter scrolls even before the element is visible on the screen, which produces a rather confusing effect. Is it possible to freeze my slider so that I can scroll left or right only when the slider is visible on the screen, or when my mouse is over it without taking vertical scrolling into account ? I've put together a codePen to give you an idea of what I'm working on and the code I've got so far. Have a nice day, Laura

I'm experiencing an issue where nested Draggable elements have incorrect autoScroll behavior when the parent Draggable is moved. I've created an example on CodeSandbox with a brief explanation of how to reproduce the problem. I'm unsure of the best way to update the inner Draggable elements when the parent Draggable moves. codesandbox link

I have created a draggable carousel. I want it to move exactly same distance equal to the width of the slides in the carousel - irrespective of the amount/ distance of the drag. In the attached codepen, the snap.x function calculates and returns the amount of drag on each drag. It looks like this callback is not getting triggered. Not sure what is going wrong. https://codepen.io/sumanta-mukherjee/pen/QWexWJy

Hi there, I found this older demo of a GSAP draggable picker: https://codepen.io/osublake/pen/YrXdGZ How can we add bounds that start from the top item, but end at the last item? I want this to happen whether I drag or throw the draggable items. To be clear, I want this picker to have a "top edge" and "bottom edge". I'm not sure whether this is controlled by bounds or a progess function. Also, if there is a way to add an "active" class to the current item, that would help tremendously. Thank you in advance!

Hi all, I need to programmatically update the rotation draggable element position when the user click on the blue donut area visible on the CodePen. I found the following solution that involve a gsap.to method, but i'd prefer use something like draggable.snapTo(180deg) Any suggestion? Thanks, you're awesome gsap.to("#controller", 1, { duration: 1, rotation: closest, ease: "back.out(1.4)", onUpdate: function () { draggable.rotation = closest; draggable.update(true) // doesn't work }, onComplete: function () { draggable.vars.onThrowComplete.call(draggable); } });

Hello everyone. I want the card with the active class to be centered on top initially. And it is also unclear why draggable does not work properly. It is necessary, if we did not move the circle to the next card, then return it back to the active one, and if we moved the circle a little further and stopped, then move it to the next card and make it active. The wrapper block must not drop the rotate value below 0. I really need your help, I've been working on this task for a very long time

Hello! I'm working on a project on webflow, and there are projects that can be cloned, as I have 0 experience with code I decided to clone a project that contains code and I needed to make some changes. Below I leave the original lines of code and my changes. Can you tell me what's wrong? Because when I put my changes in webflow, the lines of code simply stop working. Thanks in advance!!! Original: <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> <script> function initSimulation() { var Engine = Matter.Engine, Render = Matter.Render, Events = Matter.Events, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create(), world = engine.world; var containerElement = document.querySelector(".tag-canvas"); var containerWidth = containerElement.clientWidth + 2; var containerHeight = containerElement.clientHeight + 2; var render = Render.create({ element: containerElement, engine: engine, options: { width: containerWidth, height: containerHeight, pixelRatio: 2, background: "transparent", border: "none", wireframes: false } }); var ground = Bodies.rectangle( containerWidth / 2 + 160, containerHeight + 80, containerWidth + 320, 160, { render: { fillStyle: "#000000" }, isStatic: true } ); var wallLeft = Bodies.rectangle( -80, containerHeight / 2, 160, containerHeight, { isStatic: true } ); var wallRight = Bodies.rectangle( containerWidth + 80, containerHeight / 2, 160, 1200, { isStatic: true } ); var roof = Bodies.rectangle( containerWidth / 2 + 160, -80, containerWidth + 320, 160, { isStatic: true } ); var border = 1; var radius = 20; var tagUiUx = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47541d38f6886e5747c1d_uiux.svg", xScale: 1, yScale: 1 } } }); var tagWordpress = Bodies.rectangle(containerWidth / 2 + 150, 460, 240, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540055ab00edffa0a68_wordpress.svg", xScale: 1, yScale: 1 } } }); var tagWebflow = Bodies.rectangle(containerWidth / 2 + 250, 420, 200, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed37_webflow.svg", xScale: 1, yScale: 1 } } }); var tagWhitelevel = Bodies.rectangle(containerWidth / 2 - 75, 380, 160, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540c9a2047edbb293d1_whitelevel.svg", xScale: 1, yScale: 1 } } }); var tagWebflowgreen = Bodies.rectangle( containerWidth / 2 - 74, 540, 248, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540487abf2c397d777f_webflow-green.svg", xScale: 1, yScale: 1 } } } ); var tagSass = Bodies.rectangle(containerWidth / 2 + 174, 490, 105, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475407ebe06e52f9283d1_sass.svg", xScale: 1, yScale: 1 } } }); var tagWeb = Bodies.rectangle(containerWidth / 2 - 142, 440, 186, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f762b61424410849_web.svg", xScale: 1, yScale: 1 } } }); var tagStartup = Bodies.rectangle(containerWidth / 2 - 10, 260, 128, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475402ae28c15adeba62f_startup.svg", xScale: 1, yScale: 1 } } }); var tagMaintence = Bodies.rectangle(containerWidth / 2 - 242, 420, 168, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f86ad4f4175a1e69_maintence.svg", xScale: 1, yScale: 1 } } }); var tagIntegration = Bodies.rectangle(containerWidth / 2 + 60, 380, 155, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540035d9b03fc33e447_integration.svg", xScale: 1, yScale: 1 } } }); var tagMotion = Bodies.rectangle(containerWidth / 2, 360, 180, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed00_motion.svg", xScale: 1, yScale: 1 } } }); var tagPay = Bodies.rectangle(containerWidth / 2 - 59, 260, 172, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475406ef461a95eaa0f12_pay.svg", xScale: 1, yScale: 1 } } }); var tagGsap = Bodies.rectangle(containerWidth / 2 - 59, 260, 115, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f86ad4f4175a1df1_gsap.svg", xScale: 1, yScale: 1 } } }); var tagFigma = Bodies.rectangle(containerWidth / 2 - 59, 260, 210, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475407a05afc618131310_figma.svg", xScale: 1, yScale: 1 } } }); var tagMigration = Bodies.rectangle(containerWidth / 2 - 59, 260, 145, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540bfb0eee6858d556a_migration.svg", xScale: 1, yScale: 1 } } }); World.add(engine.world, [ ground, wallLeft, wallRight, roof, tagUiUx, tagWordpress, tagWebflow, tagWhitelevel, tagWebflowgreen, tagSass, tagWeb, tagStartup, tagMaintence, tagIntegration, tagMotion, tagPay, tagGsap, tagFigma, tagMigration ]); var mouse = Mouse.create(render.canvas), mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } }); World.add(world, mouseConstraint); render.mouse = mouse; mouse.element.removeEventListener("mousewheel", mouse.mousewheel); mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel); let click = false; document.addEventListener("mousedown", () => (click = true)); document.addEventListener("mousemove", () => (click = false)); document.addEventListener("mouseup", () => console.log(click ? "click" : "drag") ); Events.on(mouseConstraint, "mouseup", function (event) { var mouseConstraint = event.source; var bodies = engine.world.bodies; if (!mouseConstraint.bodyB) { for (i = 0; i < bodies.length; i++) { var body = bodies[i]; if (click === true) { if ( Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position) ) { var bodyUrl = body.url; console.log("Body.Url >> " + bodyUrl); if (bodyUrl != undefined) { window.open(bodyUrl, "_blank"); console.log("Hyperlink was opened"); } break; } } } } }); Engine.run(engine); Render.run(render); } var containerElement = document.querySelector(".tag-canvas"); var observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { initSimulation(); observer.disconnect(); } }); }, {}); observer.observe(containerElement); </script> Mine: <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> <script> function initSimulation() { var Engine = Matter.Engine, Render = Matter.Render, Events = Matter.Events, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create(), world = engine.world; var containerElement = document.querySelector(".tag-canvas"); var containerWidth = containerElement.clientWidth + 2; var containerHeight = containerElement.clientHeight + 2; var render = Render.create({ element: containerElement, engine: engine, options: { width: containerWidth, height: containerHeight, pixelRatio: 2, background: "transparent", border: "none", wireframes: false } }); var ground = Bodies.rectangle( containerWidth / 2 + 160, containerHeight + 80, containerWidth + 320, 160, { render: { fillStyle: "#000000" }, isStatic: true } ); var wallLeft = Bodies.rectangle( -80, containerHeight / 2, 160, containerHeight, { isStatic: true } ); var wallRight = Bodies.rectangle( containerWidth + 80, containerHeight / 2, 160, 1200, { isStatic: true } ); var roof = Bodies.rectangle( containerWidth / 2 + 160, -80, containerWidth + 320, 160, { isStatic: true } ); var border = 1; var radius = 20; var tagUx = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd8d18636a7bef9172_Ux%20Design.svg", xScale: 1, yScale: 1 } } }); var tagUi = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd379b5ec25e573932_Ui%20Design.svg", xScale: 1, yScale: 1 } } }); var tagWordpress = Bodies.rectangle(containerWidth / 2 + 150, 460, 240, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528ddc490eff43ec31077_Webflow.svg", xScale: 1, yScale: 1 } } }); var tagWebflow = Bodies.rectangle(containerWidth / 2 + 250, 420, 200, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed37_webflow.svg", xScale: 1, yScale: 1 } } }); var tagFigma = Bodies.rectangle(containerWidth / 2 - 75, 380, 160, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6491_Figma.svg", xScale: 1, yScale: 1 } } }); var tagIllustrator = Bodies.rectangle( containerWidth / 2 - 74, 540, 248, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd380663bd1c0627aa_Illustrator.svg", xScale: 1, yScale: 1 } } } ); var tagPhotoshop = Bodies.rectangle(containerWidth / 2 + 174, 490, 105, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528ddc490eff43ec310b2_Photoshop.svg", xScale: 1, yScale: 1 } } }); var tagPrototyping = Bodies.rectangle(containerWidth / 2 - 142, 440, 186, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6476_Prototyping.svg", xScale: 1, yScale: 1 } } }); var tagWebdesign = Bodies.rectangle(containerWidth / 2 - 10, 260, 128, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6479_Web%20Design.svg", xScale: 1, yScale: 1 } } }); var tagMaintence = Bodies.rectangle(containerWidth / 2 - 242, 420, 168, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668530de868bbbf25695cae8_Maintence.svg", xScale: 1, yScale: 1 } } }); World.add(engine.world, [ ground, wallLeft, wallRight, roof, tagUx, tagUi, tagWordpress, tagWebflow, tagFigma, tagIllustrator, tagPhotoshop, tagPrototyping, tagMaintence, tagWebdesign, ]); var mouse = Mouse.create(render.canvas), mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } }); World.add(world, mouseConstraint); render.mouse = mouse; mouse.element.removeEventListener("mousewheel", mouse.mousewheel); mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel); let click = false; document.addEventListener("mousedown", () => (click = true)); document.addEventListener("mousemove", () => (click = false)); document.addEventListener("mouseup", () => console.log(click ? "click" : "drag") ); Events.on(mouseConstraint, "mouseup", function (event) { var mouseConstraint = event.source; var bodies = engine.world.bodies; if (!mouseConstraint.bodyB) { for (i = 0; i < bodies.length; i++) { var body = bodies[i]; if (click === true) { if ( Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position) ) { var bodyUrl = body.url; console.log("Body.Url >> " + bodyUrl); if (bodyUrl != undefined) { window.open(bodyUrl, "_blank"); console.log("Hyperlink was opened"); } break; } } } } }); Engine.run(engine); Render.run(render); } var containerElement = document.querySelector(".tag-canvas"); var observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { initSimulation(); observer.disconnect(); } }); }, {}); observer.observe(containerElement); </script>

Greetings I just converted my web game (link at bottom) over to GSAP using Draggable, TweenMax and TimelineMax! I launched the site over 10 years ago, built on YUI2. About 6 months ago I decided it was time to drag it into the modern age, so I set upon a total front end re-write, this time basing all animations and drag/drop on GSAP! I deployed the update 2 weeks ago. Since then about 1 million unique users have spent over 10.9 million hours playing. Not a single GSAP bug or issue has come up! GSAP has been ROCK SOLID. WOOT! I just wanted to THANK YOU for making an amazing product that's allowed me to do this massive re-write and launch without having to worry about the animation/dragging aspects. Thanks again! PS: The new GSAP based website is https://worldofsolitaire.com The old YUI2 version is here: http://legacy.worldofsolitaire.com

Hi, I've been creating my portfolio on Webflow. On my "About me" page I want to have a "tool stack" and "expertises" section where I put related words, but I would like all these words to be draggable but to have limits (so they can't be dragged across the entire page), like In the image below I already have visually defined limits, but as I'm new to the code I don't know how to create these limits. Below is also the code I used to drag the "tags". Thanks already! <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $(".tool_stack_items").draggable({ }); }); </script>

Hi all! When I drag and drop some boxes on to the main element, i'd like to be able to swap 2 elements with each other by dragging. However when I swap 2 elements with each other, the dragged element is no longer correctly synced with my mouse. I tried this.update()but that didn't seem to do much. How can i fix this? Or should I try a different approach? TIA, Jens

Hello everyone, I need to create a timeline that must adhere to the following behaviors: - Both the timeline and the slider must scroll automatically - The user should be able to take control of the scrolling with the slider - When the user finishes dragging the slider, the timeline AND the slider should resume their automatic scrolling Today, I have an issue. Everything works well in auto-scroll, but as soon as I drag the slider, it stays frozen and doesn't start moving again. I don't understand why, onDragEnd, my autoScroll method restarts fine but the .to related to the slider doesn't ? If anyone has a solution, I'm all ears, Thanks in advance. === FRENCH VERSION === Bonjour à tous, Je dois réaliser une frise chronologique qui doit respecter les comportements suivants : - La frise et le curseur doivent défiler automatiquement - L'utilisateur a la possibilité de prendre la main sur le scroll avec le curseur - Quand l'utilisateur a terminé de drag le curseur, la frise ET le curseur reprennent leur défilement automatique Aujourd'hui j'ai un soucis. Tout se passe bien en scroll auto, mais dès que je drag le curseur ce dernier reste figé en ne repars pas Je ne comprends pas pourquoi onDragEnd ma méthode autoScroll se relance bien mais pas le .to lié au curseur ? Si quelqu'un a une solution, je suis preneur, Merci par avance

Hello, I am pretty new to GSAP. I been working on a slider like provided in the demo. The slider works fine on computer or laptop, however, when I tried on phone the slider is all weird. It is showing the wrong text by a selected box. I am sadly not sure why this is the case. I have read something about using Draggable3, but I don't know how to use this by CDN. Can someone help me out? Thanks in advance

Hello! I am quite new to GSAP and I am trying to make a slider using Draggable. I am trying to display a caption when an item is above the arrow (the '\/'). I got working for the right side. However, I can't get the draggable to be able to drag all the way to the left without messing up getting the 'content-box' index in the OnDragEnd function. Please, let me know how to solve this. Thanks in advance

Hi, I have a circular slider on my website, copied from this example https://codepen.io/Mrchoy/pen/eYbezYG It works fine but I noticed a big performance issue on iOS devices, the slider is almost impossible to use because of the lag. Is there something I can do to improve this? The js is copied from the example, I just changed the css and of course the content of the cards. Thank you

Hey guys, hope you all are having a great week! Is there any way I can achieve the 'radius' functionality using the 'rotation' type Draggable? I tried hacking my way into it but no good My problem is that when defining the liveSnap property on a 'rotation' Draggable, the grabbed element just instantly jumps from snap to snap instead of smoothly rotating around and then locking position once it is close enough to a given snap point (like what happens when using a 'x,y' type Draggable: https://codepen.io/GreenSock/pen/wgapaY) This codepen is the closest I've found to the result that I want, it works fine the way it is, but as soon as you add liveSnap: true, the dragging just becomes truncated ⬇️ Thanks in advance!

Is it possible to define points in css strings? My usecase is a mobile menu that slides out after a drag. The value that the draggable item ends at is a pixel value which is fine until you resize the browser. I know you can't resize a phone but a rotate will have the same issue and you can of course also have menus like that on desktops. A points definition of… ["0%", "100%"] …would fix that.

Ok so this is a continuation of my previous post (that was resolved) The problem now is that when the item that exists below the fold (you have to scroll to reach it), when dragged the draggable on the `move` function will correctly resolve hitTest versus other containers, but on dragEnd it will not resolve hitTest correctly. Other list elements that are above the scrollbar correctly resolve hitTest on both `move` and `dragEnd` Here is a sample: https://stackblitz.com/edit/gsap-react-basic-f48716-tc3dev?file=src%2FBoxItem.js (simply drag box 3, 4 over the drop area and release, the hit test resolves correctly, then drag box 7 on move it will fire the hitTest correctly, but when released over the drop-area the hitTest will return false) 2024-01-18 16-51-16 (1).mp4

Hello! I am using this useful resource https://codepen.io/GreenSock/pen/JjZdPWj to create my custom circle cards slider. I'm triying to spread all the cards around the main circle with a small rotation to get an effect like the image provided, because my cards are overlaping in both sides of the window, but I don't know how to approach this, it would be necessary to animate the rotation of the cards when the animation of the carrousel is executed to keep cards circle. Anyone could help me? Thanks!