Search the Community

Showing results for tags 'draggable'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 458 results

  1. Niek Roemahlewang

    Swipecube Navigation

    Hi all, Recently I made this 3D cube and I can't seem to get the navigation to work properly: I used this example of Chris Gannon: https://codepen.io/GreenSock/pen/3ff3af968fb3356423998050b0ae1d42?editors=0010 to create the cube and interaction. Dragging works fine with snapping, but when you click on the navigation buttons while the cube is tweening, 90 degrees are added, so the cube isn't 'snapping' anymore and it look likes the cube hasn't turned all the way. I've added a check to prevent this, but still no luck. Is there a way to disable the click while the cube is tweening? Or should I use some sort of 'snap' to allow the cube to turn only by 90 degrees. Any help is very much appreciated!
  2. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?
  3. Hello... how can get this overflow-x to scroll with a nice flick ? and be bound to the overflowed container ? Could flexbox be part of the problem ? I've forked one of Diaco's pens from another post. Thank you for the help!
  4. DraggableSock

    Draggable not working with React 16.5

    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!
  5. b0dg4n

    Draggable with create-react-app

    I am trying to get a div to rotate on drag using the Draggable api in a fresh create-react-appinstallation. I cannot seem to get it to rotate. Here is my App.js file: import React, { Component } from 'react'; import { Draggable } from 'gsap/all' class App extends Component { componentDidMount() { Draggable.create('.draggable', { type: 'rotation', onPress: function() { console.log('clicked'); }, }); } render() { return ( <div> <h2>React & GSAP Draggable</h2> <div className='draggable'>Drag and rotate me</div> </div> ); } } export default App; When I press the div, I can see the clicked log to console, but the div stays put when dragging. TweenMax works fine: TweenMax.to(target, 3, { color: 'red', })
  6. I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex. But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS". https://codepen.io/TirochH/pen/eGqbNL Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage). https://codepen.io/PointC/pen/eWNRpe Hans
  7. Hey there forums! This is kind of more of a general javascript question than a greensock question, though it does involve greensock! I'm trying to build off of this codepen I found - My goal is essentially to create more boxes and targets and have certain boxes with a class of 'incorrect'. I'd like to check for when a box with the class of 'incorrect' is on a target with a Check Answers button that I've created. The difficulty I'm having is trying to add a class of "wrong" to the targets when a box with the class of "incorrect" is snapped onto a target. My theory is that then with the Check Answers button I can just look for targets that have the class of "wrong" added to them. I've started building off of this codepen on my own - Where I've changed the first box to the color blue and added the class of "incorrect" to it. In the CSS panel I also added a class of "wrong" and changed the width to 300px for now in the class, so I will know if my code is working. I wrote the function: if (e.target.hasClass("incorrect")) { $(targets[i]).addClass("wrong"); } I'm still learning, so I hope this function is written correctly? Essentially wanting to add the class "wrong" to targets which have a box with the class of "incorrect" snapped to them. But wherever I put this function in the onDragEnd function, it seems to break things. . . right now it's at the bottom of my code and commented out. I've never seen a function as long as this onDragEnd one with so many nested if statements, so I'm pretty confused as to how everything is firing off and where I could put my function without mucking everything up? Any help is much appreciated!
  8. Hi there, first post on the forums and absolute GSAP newbie - so please be patient I have created an abstract map in SVG (effectively a SVG group <g id="groupAll"> of boxes and lines between them), which I have made draggable by applying Draggable.create("#groupAll", {type:"x,y", edgeResistance:0.65, dragClickables: true}); My question is: How can I use TweenLite.to() to reset the transformation applied by the Draggable? I see that Draggable applies its transformation to the <g>'s style:"transform: matrix3d(...)" but I don't know which value to "cache" beforehand and to set it in the TweenLite.to() Using the transform value with "matrix3d(...)" doesn't work. Thanks for your help! AndyZ
  9. I am working on some concentric circles that should rotate infinitely, until a user clicks on one of them, in which case it should stop the animated rotation and be draggable (rotation). Then, if a different circle is clicked, the new one should stop it's animation, but the previous one should start up again from the position where the user left it after dragging, but with it's original direction and speed. I have managed to get the pausing/unpausing behavior working correctly, except for the fact that if the user drags a band a lot (say, rotating it around fully 2 or 3 times in the same direction), when the animation restarts, it's either going the wrong speed, or the wrong direction, or both. The animation is this: export const bandRotation = (element, rotateDir, rotateSpeed) => { const rotateDeg = rotateDir === "right" ? 360 : -360; const tl = new TimelineLite(); tl.to(element, rotateSpeed, { transformOrigin: "50% 50%", rotation: rotateDeg, repeat: -1, ease: Linear.easeNone }); return tl; }; I've tried a couple different ways of stopping and starting it: if (this.props.paused) { this.state.rotation.kill(); } else { this.setState({ rotation: bandRotation(this.band, this.props.direction, this.props.speed) }); } and: if (this.props.paused) { this.state.rotation.pause(); } else { this.state.rotation.invalidate(); this.state.rotation.restart(); } both of which I would think would restart the animation normally, but again, it's either going the wrong speed, wrong direction, or both. What can I do to ensure the animation restarts with the same speed and direction, no matter how the user drags the circle/band while the animation is paused?
  10. I am trying to set up some concentric circles that are draggable/rotatable, and I'm trying to set it up on <g> tags because there are going to be some smaller SVGs that need to rotate around as if they were attached to the large color bands. I read the pinned SVG gotchas thread, and although it doesn't mention <g> tags, it's clear that it should work because it works here: Some notes about my codesandbox demo: I had some issues trying to use TweenLite by including gsap as a dependency and using a regular import, so I commented out the imports and added CDN links to TweenMax and Draggable in index.html. Clearly Draggable is loaded and works because I also made an extra draggable div just to make sure. The ultimate behavior I am looking to get is that the concentric bands should be rotating infinitely. If a user clicks on one of the bands, the rotation stops and the band becomes draggable. Once the user clicks on a different band, the rotation starts up again. There are two sections of code that are commented out right now, but if you uncomment them you will see the rotation animation/pausing behavior working. The part that's eluding me is the draggability. All the important stuff is happening in the BaseBand.jsx file. Any pointers on how to get draggable rotation working on an SVG <g> tag would be very welcome.
  11. HaunGo

    swipe & flick ?

    I thought there was a GSAP plugin for swiping and flicking ? good for mobile . Am I thinking of the Draggable plugin ? I just need to swipe/drag/and flick while that motion also controls a separate TimelineMax. Any thoughts or suggestions ? Also, I'm looking to do a bit of scroll hijacking.. so, if theres GSAP related solutions for that, I'd love to know! Thanks !
  12. joshlopez

    snap to center of div & replace

    Hello all, I am new around here. I am having 2 issues currently. I am trying to make my draggable boxes snap to the center of my target box. Currently they are snapping way off. lol When a new draggable box is put on the target box, i need any other box currently on the target box to move back to its original position. Thank you for your help, I really appreciate it.
  13. This code was inherited from @blakebowen draggable loop however his implementation is using jQuery and I am trying to convert to regular JS. Any thoughts on why this may not be firing? var $overflow = document.getElementById("overflow"); var $viewport = document.getElementsByClassName("viewport"); var $wrapper = document.getElementsByClassName("wrapper"); var $boxes = document.getElementsByClassName("boxes"); var $proxy = document.getElementById("box1"); //$("<div/>") var numBoxes = 4; var boxWidth = 350; var boxHeight = 250; var imgWidth = boxWidth - 6; var imgHeight = boxHeight - 14; var viewWidth = $viewport.offsetWidth; var wrapWidth = numBoxes * boxWidth; var progress = 0; var xMin = 0; var xMax = 0; TweenLite.set([$wrapper, $viewport], { height: boxHeight, xPercent: -50 }); TweenLite.set($boxes, { left: -boxWidth }); // for (var i = 1; i <= numBoxes; i++) { // // var src = "https://unsplash.it/" + imgWidth + "/" + imgHeight + "?random=" + i; // // var num = $("<div class='num'/>").text(i); // // var img = $("<img />", { src: src, width: imgWidth, height: imgHeight }); // //var box = $("<div class='box'/>").append(img).append(num).appendTo($boxes); // var box = document.getElementsByClassName("box") // console.log(boxWidth) // TweenLite.set(box, { x: i * boxWidth, width: boxWidth, height: boxHeight }); // } var animation = TweenMax.to(".box", 1, { x: "+=" + wrapWidth, ease: Linear.easeNone, paused: true, repeat: -1, modifiers: { x: function(x, target) { x = x % wrapWidth; target.style.visibility = x - boxWidth > viewWidth ? "hidden" : "visible"; return x; } } }); Draggable.create($proxy, { type: "x", trigger: ".wrapper", throwProps: true, // onDragStart: setRange, onDrag: updateProgress, onThrowUpdate: updateProgress, snap: { x: snapX } }); $overflow.on("change", applyOverflow); $(window).resize(resize); function snapX(x) { return Math.round(x / boxWidth) * boxWidth; } function updateProgress() { // var norm = normalize(this.x, xMin, xMax); animation.progress(this.x / wrapWidth); } function resize() { viewWidth = $viewport.width(); animation.render(animation.time(), false, true); } function applyOverflow() { if($overflow.prop("checked")){ TweenLite.set(".wrapper", {overflow:"visible"}); }else { TweenLite.set(".wrapper", {overflow:"hidden"}); } }
  14. reference: https://greensock.com/docs/Utilities/Draggable/hitTest var element1 = green; var element2 = red; if (Draggable.hitTest(element1, element2)) { console.log('HIT!'); } #green { transform: rotate(45deg); } Always triggers HIT! everytime element1(green) enters the area demonstrated as "blue box" even if it doesn't hit element2(red) demo: see attached image Is there any possible way to fix this issue as I wanted to trigger 'HIT!' only when green touches red (given that I want to rotate this image/div), Thanks in advance
  15. Seb-AS

    Draggable + zoom out

    Hi, It's my first time using gsap with react(used a lot in as3), and I've a lot of questions if someone can show me an example o guide me in the right direction. I need to make a map like "google maps", the map it's a div with a background-image and inside svg with point. The issue I'm having it's if I drag the map the +/- buttons scale the map but in the wrong position, my idea it's if I scale up the the map then drag then scale down it should come back and animate to the starting position. Now I'm forcing to move to the starting position if the scale it's equal to 1 window.TweenLite.set(this.map, {force3D: true, ease: ease, scale: minScale, transformOrigin: "center center", x: 0, y: 0, z: .001}); Hope it's something easy to fix. Thanks
  16. elrojo

    Multiple Drag Instances

    Is it possible to have multiple drag instances? Attached pen keeps failing... var count; for(count = 0; count < 2; count++){ console.log(count) Draggable.create("box" + count, { bounds:"#container", edgeResistance:0.5, throwProps:true, lockAxis:true, onDrag:function() { TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x}); }, onThrowUpdate:function() { TweenLite.to(document.getElementsByClassName("original" + count), 1, {x:this.x}); } }); }
  17. benoit

    draggable rotation value

    Hi, I use the draggable plugin. Is there a simple way to return the rotation value between 0 and 360 deg ? I play with something like that : var r = (r + 3600) % 360; It's work but, it's not proof. How can I fixe this?
  18. Deepak Oberoi

    How to limit Draggable to a path

    I want to limit a Draggable within a Path given for an AVG Layer. if that's possible? I read about bounds but it says container or XY cordinates can be passed in bounds if we can pass an SVG path to bounds? something like http://jsfiddle.net/JwkYm/8/
  19. How can I clear z-index from a draggable after releasing it, so that new page elements don't appear beneath the draggable item?
  20. I am using a draggable knob along an svg path. The path is a quadratic bezier curve which has the y coordinates going up and then down. How should I progress the draggable instance so that I am able to fill the path while dragging the knob on the path? To simply put it, I want the path to be filled while dragging the knob and the portion of the path to be filled should be only upto the knob. Also the mouse pointer should be in sync with the draggable knob. Any suggestions or leads are appreciated.
  21. Hey guys, I feel like calling kill() on a Draggable instance should probably clean up after itself and reset the DOM element it was invoked on to it's pre-initialization state. Currently it leaves 'user-select: text' on the inline style attribute of each element, overwriting any default user-select settings that may have been previously defined (inline or css). See line 903 in Draggable.js _setSelectable = function(elements, selectable) { var i = elements.length, e; while (--i > -1) { e = elements[i]; e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc; _setStyle(e, "userSelect", (selectable ? "text" : "none")); } } I can of course manually clean up the style in my implementations (which is what I currently do) but I think it would be much cleaner if Draggable would keep an internal reference to any style properties it is going to modify and reset the element to that reference after the Draggable instance is killed. Sorry for being nitpicky. Keep up the great work! Jonathan
  22. I have taken the Codepen for "Draggable with "droppable" logic" (located here) and forked it and rewritten a lot of it to to get the effect i am looking for. basically, i do not want any draggable item to EVER overlap any any other draggable item. I spent a good part of the morning today searching the forum and reading up in the docs trying to think of some form of simple collision detection. The idea being to detect a collision and have a simple collision event that would make the divs bounce off of each other. that is not built in to gsap (should be!) and I have not found anyone on the forum who has successfully done it. So I must try. What I have in my sample is the result of banging my newbie head on my monitor all day! it is not 100% collision detection (like I'm used to seeing in Unity) but it does prevent overlaps in a clunky sort of way. If you drag, say, box1, over any other box it will be tweened 100px repeatedly until it is no longer overlapping. Additionally, there is a recursiveness in the function calls. If, while moving box1 away from box2, box1 then overlaps box3, the recursive will continue to cycle the functions and the tween will be repeated until box1 is no longer overlapping any box. This works regardless of which box you drag around and drop. I say it is clunky because it tweens 100px, pauses, tweens another 100px, pases...and so forth until the dreaded overlapping is cured. Where I am stuck is replacing the 100px with the amount of overlap (plus some small amount so the box ends up a little bit away from the last box it overlapped). I have commented the code so you can see the varible names, etc. and understand what i am struggling with. As an added bonus, it would be nice, but not strictly necessary, to remove the clunkiness I mentioned above. One final comment, it may appear that this if for a game. It is not. I would do this in Unity if it were a game - or maybe Buildbox. This is actually just one step along the path I have chosen to build a "unique" interface for a desktop app I want to build using Electron.
  23. Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
  24. TheAlexPorter

    Draggable Crashing Ionic 2 / Cordova

    Hi everyone, I'm experiencing odd behavior. Whenever I reference Draggable ANYWHERE in my Ionic 2 app, Cordova crashes and throws this error: "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" (screenshot included below). When I run the code in the browser doing "ionic serve", draggable works and everything is great. On the emulator or build, the app crashes. If I remove / comment out draggable, the app runs. There isn't any issue with TweenLite, just Draggable. Has anyone else experienced this before?
  25. Refer to the Codepen which is the autoscroll demo from GreenSock. First off, I am totally new to GreenSock. I love the smooth functionality of this right out of the box! I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction. (1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen. This will make it easy to find that "lost" element. (2) It would be useful to have four transparent bars (left, right, top, bottom) that always live on the edges of the autoscroll container and four squares (top-right, bottom-right, bottom-left, and top-left) that always live in the corners of the autoscroll container (maybe positioned outside of the autoscroll container?). What I mean is that when scrolling occurs these eight elements always remain around the edges of the autoscroll container. Then when the mouse hovers over these areas the autoscroll area scrolls in the corresponding direction. Note that I do not intend for this app to be used on mobile devices as ultimately I intend for this to be built out using Atom's Electron framework as a desktop app. Because of that I am not concerned with the fact that hover is a problem on mobile devices. It would be even better if the scroll speed was controlled by how far the mouse is inside of the border div. For example, considering the right side bar, as the mouse enters the bar from the left the scrolling is slowest and the further to towards the right edge of the bar the mouse gets the faster the scrolling becomes. I Hope I made sense there! Lastly, this should not interfere with the default behavior of the draggable autoscroll. That is, I still want the autoscroll to happen based on dragging a div to the edge of the container. Any advise you have to offer on these two functionalities would be very much appreciated.