Search the Community
Showing results for tags 'draggable.js'.
Found 6 results
-
Hi! I've got a row with elements which can be dragged inside dropzones. All is working well but I can't get the dragged objects to fit exactly within the dropzone. Can someone point me in the right direction? Thanks in advance, Pieter
-
Hey ya'll, New to gsap and draggable, trying to mimic a "Pull Down to Dismiss" effect like you will commonly see in native mobile apps. I am sure I am doing to something wrong and could really use some guidance. I have to set my animation duration unrealistically high to accomplish the effect which makes using the then promise from gsap.to - overall where I am at feels hacky, but I can't seem to find a good path in docs. Below is an example of what I am hoping to achieve on all popular mobile browsers: Pen:
-
So, I'm currently building an animated div container for my app but in doing so, I am encountering a bug, I suppose. As I did set thedragClickables to false in the Draggable.Create() object but the results of setting it to false is inconsistent on touch screen devices. If I elaborate the situation here, If I directly tap the container without dragging it initially the route is switched without any issues. However, when I drag the container and then tap the button it works sometimes and sometimes it doesn't. Tested it on iPhone 8, iPad and laptop touch screen Any help is greatly appreciated. PS: The codesandbox provided is a extremely scaled down version of my app. I do have other stuffs like react transition groups which I think shouldn't effect this issue. However if it's needed to be included I can do that as well. Edit: It works flawlessly on desktop though. No issues there CodeSandBox Link - https://codesandbox.io/s/keen-rhodes-f0r55?file=/src/index.js:0-231
-
Hello, I have following setup: let tl = new TimelineMax(); tl.from('#draggableElParent', 1.5, { opacity: '0' }, "-=1.5") let scene = new ScrollMagic.Scene({ triggerElement: '.container', triggerHook: 0, duration: "400%" }) .setPin('.container') .setTween(tl) .addTo(controller) const drag = Draggable.create("#draggableEl", { type:"rotation", bounds:{ minRotation:0, maxRotation:180 }, onDrag: function(){ // this won't work until animation is finished } }) The problem is I can't rotate this #draggableEluntil scene animation is finished. Is this bug or a problem in my configuration? It seems like only rotation doesn't work until animation is finished Here I reproduced my problem:
-
Hi, I've been trying to re-create the history timeline where I found in: https://www.longines.com/company/history/20th/1939 I tried up to a certain point, after that i'm out of ideas. I've provided the work i've done so far. Up to now i've done the following things, OnDrag the handler, the years dots moves OnClick the year dot, page will scroll to the relevant history topic. Now I'm struggling in following areas, how identify, the handler is in between which two years dots, have to show the years data in the handler on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying. And even-though, I manage to move the years dots, at end of it, the handler is going pass the last dot. If you look the reference link. They are correctly managing it. I've been trying this for last couple of weeks now. If you guys help on this that would be great.
-
Hello guys. My Draggable object: Draggable.create(document.getElementById('el'), { minimumMovement: 50, type: 'y', onDragStart: function() { this.minimumMovement = 1; this.type = 'x,y'; }, onDragEnd: function() { this.minimumMovement = 50; this.type = 'y'; } }); I have default minimumMovement and type properties. When Drag starts I want to change this properties and when drag ends I want to set this properties to the default values. But It doesn't works. Can you help?
