Search the Community

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); } });

Hi I'm hoping for some help with this Draggable carousel I've created. I made a simplified Codepen to show the basic build of the section. I'm still fairly new to GSAP and especially the Draggable plugin so any help here would be greatly appreciated. The issue I'm coming across is that the carousel works as intended on Desktop (I'm using Chrome). It follows the bounds container. But on mobile, it won't let me drag through the carousel at all. It hits the beginning bounds edge and won't move. Since the first element of the carousel lines up with the edge of the bounds container it just won't scroll at all. I've tried a number of different methods to fix this with my limited understanding including trying minX and maxX which does allow it to start scrolling but then the carousel scrolls off the page and disappears. If you'd like to see it in full context you can look at that section of the webpage here: https://awardco.webflow.io/recognize-awards/home#past-winners but I'm hoping the Codepen will be enough.

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

First of all, i forked the codepen demo template, but i couldn't get it to work, even though it's exactly the same code as on my local machine. I attached a gif to this post which showcases the following problem: I'm using the Draggable plugin, but noticed an issue when scrolling. The item i was dragging wouldn't scroll down with me. This only seems to happen when the item i'm dragging is in a different scrollable container. Is there a way to set a different scrolling parent on the Draggable instance? I couldn't seem to find anything in the Draggable docs either. 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

I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable

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

Hi, i am starting a new project where a slider has already been set up with swiper js. Now i was wondering if its possible to add a cool animation when i drag or scroll through the slider like on this website: http://manifesto.clapat.com/index-showcase-carousel.html the images seem to be cut on the sides and seem to have more depth also they skew in the direction they are dragged. I was just wondering if someone could give me some direction on how to approach this kind of effect with GSAP or if there is a tutorial that someone could point me to. So no debugging for now^^. Also i wanted to know, if this effect is possible with a slider made with swiper JS or if there are any complications. Additionally i would like to implement the transition effect when clicking on the slider images. I saw that it can be made with the FLIP plugin, i just hope it works within Swiper JS. Thanks

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!

I'm using this slider from an other gsap question, however I would like to add buttons to go to next and prev slide. However I'm not totally aware in how can add this functionality. I've been looking on "startDrag()" method but didn't get it. Can someone help me with that?

Hello! So I have a scenario where I have a draggable of size 250x250 and when I drag it, I pass a class that converts it to 150x150 pixels (width, height), however when I do `draggable.hitTest("#someelement", "50%")` first of all it doesn't match although visually the elements overlap, and when I print the boundingClientRect of the draggable instance it prints `250` for width and height. I'm doing this.update onPressInit but it doesn't change anything. Is there a way to update the bounds of the draggable instance after the drag initiates or onDragEnd? onPressInit: function (ev) { console.log(draggable, this); this.target?.classList.add('intransit'); this.update(true); },

Hello, I made draggable content, but there is a problem in my code to move it by dragging left and right, but I could not solve it. Can you help with the Codepen link? //Draggable Start let tickerElement = document.querySelector(".ticker"); Draggable.create(tickerElement, { type: "x", edgeResistance: 1, bounds: ".ticker-slider", onDrag: updateTickerPosition }); function updateTickerPosition() { let newPosition = tickerElement.getBoundingClientRect().left; gsap.set(".ticker-content", { x: newPosition }); } //Draggable End

Hey there, I'd like to move an element horizontally using wheel and/or drag on desktop and touch and/scroll on mobile. I've set up Draggable for easiest possible scrolling with inertia, and Observer for wheel events. I can sort of update a target value for the element to tween to, but the back-and-forth of the respective x values won't quite work. Any tips? Best regards Constantin

First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!

I want to create a parent div with 80% of screen width, and inside of that there should be mini square colorful divs, now the functionality i want it to drag though them inside of that parent div, and see all the divs because there'll be so much divs so it will be hard to see them in 1 place, and also It should show the divs in a grid style. another website (midjourney) using same features uses this draggable.min.js() gsap.(). how to achieve it? you can go to (https://www.midjourney.com/) and test it, just click on the eye icon and it will appear on the hero section

Hi there. I am trying to create a bottomsheet. As you guys can see, there is a scrollable div element inside draggable element. If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down. If scrollTop is more than 0 then it should scroll and should not be dragged. But the problem is that I cannot solve this issue. I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue. And I tried to solve this issue but i can't. How can I fix this issue?