Search the Community
Showing results for tags 'draggble'.
Found 10 results
-
Hello, I've created something with infinite draggable scroll, but there's a gap forming after the last item, leaving some space between it and the first item. Also, there seems to be a slight jitter in the slider. I am sharing the error image in the attachment. Can you help me with this?
-
Hi All! I have this code, largely based on an example by OSUblake. I am having an issue with the blocks overflowing the element. I have defined a height (and max-height) each with a value of '37rem' and have set overflow-y to 'scroll': <section class="listContainer w-1/2" style="height:37rem; max-height:37rem; overflow-y: scroll"> ... list items ... </section> In the image below, there are 9 items. the height of '37rem' will mean that only the first 6 blocks will show, and any more than that would mean that the parent block is scrollable. However, as shown in the image below, this isn't what happens. There is a scroll bar but the blocks still overflow the parent element. Admittedly, I'm not the best but to the best of my knowledge, this should work. I'm sure this is an issue with me not currently fully understanding how the JS behind it works (I am working on this ). If you need any more info, please let me know! Thank you in advance for any help on this issue!
-
I wish when they click and hold the header with id #mydivheader they move the whole card with id #draggable. I am sending the link, so if someone can write me the code and explain how it works, I would be very grateful. The site is on webflow. https://nemanjas-groovy-site.webflow.io/
-
Hi! Is it possible to use rem or em units to create snap points? I'm trying to create a carousel that always snaps the nearest card to the center, but the cards uses rem units instead of px. This carousel starts with a center card and can be dragged left/right. Thank you for any clarifications!
-
Hello! First of all, thank you for everything related to Gsap, you guys are great. Second, I came with a little problem, I created a carousel using gsap and the progress is controlled with draggable. The thing is that it works great in a project I created using Vue.js but when I built it using only javascript it does not work properly. The actual problem is that it does not snap as the one created with Vue. This is the codepen, I commented out liveSnap, so you can see how it works but if you uncommented liveSnap you will see the problem. https://codepen.io/maxrpark/pen/ZEvmEJp I am also sharing a gif of the one I made with Vue, to show how is supposed to work. Many thanks in advance Max.
.thumb.gif.9e46592706937cbbfe8d2ed97bce69f8.gif)
-
I have an unordered list of items, I am also appending more items in the respective list dynamically. As you can see in the below example that the drag only working on click (because I made it to do so). Is there any way to use event delegation without adding eventListener. Note - I am using event delegation because I am dynamically appending elements in the list.
-
the onDragEnd function is not working? Also what I want to achieve is that I want to prevent dragging in left as well as in right direction with animation or specifically with slight bounce animation. If I am not using boundsprop everything is working just fine. -
Hello, I'm having an issue trying to destroy a Draggable instance on beforeDestroy and I always get the message that Draggable in not defined and so I can't kill the instance. methods: { loadList(){ setTimeout(() => { //gsap.registerPlugin(Draggable, InertiaPlugin); Draggable.create('#wrapper__drag', { type:'x', bounds: '.drag__inner-wrapper', autoScroll: 1, inertia: true }); }, 1000); } }, mounted () { gsap.registerPlugin(Draggable, InertiaPlugin); this.$root.$on ('myEvent', () => { setTimeout(() => { this.loadList() }, 1500); }); }, beforeDestroy() { Draggable.get('#wrapper__drag').kill(); } In console I get: VM15175:1 Uncaught ReferenceError: Draggable is not defined Please help me.
-
I am a huge newbie when it comes to gsap, however i wanted to create a rotating wheel with numbers on it inspired by a ui i saw. I used draggable hittest to detect the collision of the number and the collision box placed on the screen. however when i went outside the current viewport the collision was actually colliding with other elements on all 4 sides of it. I saw that there was really no way to fix this with the gsaps collision detection so i thought of a method of only detecting if the element collides with the hitbox AND is also inside the viewport. however it does not seem to register when the number goes into the viewport after rotating and only registers it onload... even if i use a setinterval function that runs multiple times, it does not seem to work. Any reason as to why? could i change it somehow to detect when the number goes into the viewport from draggable rotation? Or is there a way to fix the collision to only collide with the number its meant to collide with? Thank you for the read! I hope i can find some way to fix this very soon :).
-
Hello. Ran into a problem. I am trying to animate wheel like draggable. function is "slideAnim". Can you tell me what I'm doing wrong? Thanks .
.gif.9c8fe41fa23c916cfbc0e5ef52975f7e.gif)
