Search the Community
Showing results for tags 'throwpropsplugin'.
-
I want to make a sort of wheel of fortune. But the wheel is now stopping too quickly. Is it possible to change (double?) the Momentum-based animation of the wheel causing the object to glide gracefully to a stop? There is no friction property, is it? I hope there is a simple solution. :)
- 3 replies
-
- draggable
- throwpropsplugin
-
(and 1 more)
Tagged with:
-
See the Pen Draggable "Toss" Demo (4col) by GreenSock (@GreenSock) on CodePen. See many of Draggables properties in action including bounds, liveSnap, snap, edgeResistance and more. This demo is a great starting point to get familiar with Draggable and ThrowProps plugin. Fork, edit and enjoy! Be sure to read the [docs id="js.Draggable" linktext="Draggable Documentation"].
-
- bounds
- edgeresistance
-
(and 5 more)
Tagged with:
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo
-
Hi all, I'm trying to use the ThrowPropsPlugin together with the Draggable functionality in my VUEjs website. However every time I set the property "throwProps" to true I get this error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: x I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped. Here's my code for reference. If anyone could help it would be much appreciated. Thanks! require('../libs/ThrowPropsPlugin') import Draggable from 'gsap/Draggable' export default { mounted() { initDraggable() }, methods: { initDraggable() { Draggable.create(this.$refs.slider, { type: 'x', minimumMovement: 10, edgeResistance: 0.5, throwProps: true, bounds: this.$refs.wrapper, onDragEnd: function() { console.log('target: ' + ThrowPropsPlugin.getVelocity(this.target, "x")) } }) } } }
- 2 replies
-
- throwprops
- draggable
-
(and 2 more)
Tagged with:
-
Hi there, just got a club license to use the amazing ThrowPropsPlugin in combination with `draggable` and `type`:`scroll`. Now I would very much like an option to make the scrolling snap to certain elements, if flicked. Is there an option or approach for this?
-
Hey, Been using GSAP for a while now, but I have a problem with the snap feature of ThrowPropsPlugin. I'm currently working on a project that includes pixi.js and I'm using GSAP to animate. since I'm using pixi and not regular html elements I decided to use ThrowProps directly and not draggable. here's a snippet: this.tween = ThrowPropsPlugin.to(this, { throwProps: { x: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x } return naturalStop } }, y: { velocity: 'auto', min: 0, max: 1000, end: function (naturalStop) { if (distanceFromAnotherPixiObject < 50) { return anotherPixiObject.x } return naturalStop } } }, onComplete: () => { delete this.tween } }, 1, 0, 0.4) that code is executed with the event pointerOut and "this" is the pixi object the problem I'm having is that in order to calculate the distance between the 2 objects I need to have both x and y in the end function.. the behaviour I'm trying to do is to snap to an object if the dragged object is close enough.. really need your help with this one, been struggling for a while now thanks in advance
- 3 replies
-
- throwpropsplugin
- pixi
-
(and 2 more)
Tagged with:
-
hi, i'm trying to use the ThrowPropsPlugin with end:[-80,-160,...] parameter. the first time i use it on my list, it works. it stops at one of the endpoints. but when i click the second time on the list, it jumps quite a distance on mousemove. plugin version is: VERSION: 12.0.16 attached the class i use. any idea why this happens? thanks TestGreensockScroll.as
-
Hello, I've accidentally* found out that ThrowPropsPlugin plugin has such properties (or events) as onThrowUpdate and onThrowComplete. But they're not documented anywhere. Is there something like a full API reference for all methods and properties for all the modules? Especially required for the ThrowPropsPlugin. Thanks! * I was looking through code examples of some people on Codepen and noticed them using these properties.
- 3 replies
-
- throwpropsplugin
- draggable
-
(and 1 more)
Tagged with:
-
Hi, First of all, thank you so much for your amazing support, it helped me a lot of times. I have a problem with Draggable / ThrowPropsPlugin, only on Chrome, and I can’t figure why. Sometimes, the slider don’t move when I drag it although the onDragStart event is called. I made a Codepen here : http://codepen.io/adrienlementheour/pen/KaKggM. Can someone take a look ? Thank you
- 11 replies
-
I have the following tween that is called every 60 seconds with a setTimeout: ThrowPropsPlugin.to( nextItem, { throwProps:{ x:{ velocity:200, min: 0, max: 0 } }, onUpdate: function(){ _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) ); }, ease: Power3.easeOut, onComplete: DRA.prepareNext.init }, 4 ); Everything is going fine, until I leave the browser window (new tab). I want it to continue animating. I read that I can cancel the usage of RAF. But I couldn't read anything about it in the docs ( So I've read that ThrowPropsPlugin uses the TweenLite. I've added the following code to cancel the RAF: function focusBrowserTab() { TweenLite.ticker.useRAF(true); } function blurBrowserTab() { TweenLite.ticker.useRAF(false); } window.addEventListener('focus', focusBrowserTab); window.addEventListener('blur', blurBrowserTab); This would be the best possible solution for me. Disable the usage of RAF when the window is blurred. When the window focus is back I want to make use of RAF again. It is animating now in a non focussed tab, but the tween does not take 4 seconds. More like 30 or so. And when I focus on the tab the timings seem to be messed up. Is there something I do wrong here? Edit: Forgot to tell that I also tried the TweenLite.lagSmoothing(1000, 16); But this didn't make any difference.
- 6 replies
-
- throwpropsplugin
- raf
-
(and 1 more)
Tagged with:
-
How can I program an object using ThrowPropsPlugin along a spiral path (roulette wheel ball)?
- 2 replies
-
- throwpropsplugin
- spiral path
-
(and 2 more)
Tagged with:
-
Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman
- 5 replies
-
- blitmask
- throwpropsplugin
-
(and 3 more)
Tagged with:
-
Hello, I'm trying to detect if my draggable "isThrowing"... https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/isThrowing/ Clearly I'm doing it wrong? Thanks!
-
Hi! I have noticed that if I have a draggable element with throwProps:true and throwing it will stop animate if I call the enable() function while the throw animation is still active. What im trying to do is that I have nested draggables that needs to call disable and enable at a specific time and dont want to break the animation if its still going. I looked at the Draggable.js source code and in line 1718 does the animation to stop. TweenLite.set(target, {x:"+=0"}); //simply ensures that there's a _gsTransform on the element. I wanted to let you now what I found and maybe its better that you guys does the change in source code if you think this is something to change. The disable() function works as i should. Thanks!
- 2 replies
-
- draggable
- throwpropsplugin
-
(and 2 more)
Tagged with:
-
Hello, I recently upgraded my AIR SDK to 15 and none of the UI made with the ThrowPropsPlugin seems to be working in the iOS "slow-test"/adhoc builds. TweenLite seems to be ok. Has anyone faced a similar issue? Also, I was using DataLoader to communicate with PHP which again is not working on the above build types. (It works on "fast-test" though.) Any idea what's happening here? Regards
-
I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I want is for mouse scrolling to behave just as the other scroll methods do. Any help with achieving this effect would be greatly appreciated!
- 1 reply
-
- throwpropsplugin
- draggable
-
(and 1 more)
Tagged with:
-
I want to know if there is some way to click and object and trow it with draggable and throwprops plugin ?
-
Hi guys, I just tried the ThrowPropsPlugin to move a MovieClip in x-direction instead of y-direction like in the example. I took the code from the example and changed every y-value to an x-value. However, it doesn't seem to work smoothly. The drag-movement is somewhat stuttered. Strangely enough, the drag-movement where the position exceeds the bounds runs smoothly. I've attached a minimal working example, maybe someone can have a look and tell me where the code goes wrong. For some reason I'm not allowed to attach any file, so I'll just upload to my Dropbox: https://dl.dropboxusercontent.com/u/289091/ThrowPropsPluginTest.fla
- 2 replies
-
- throwpropsplugin
- plugins
-
(and 2 more)
Tagged with:
-
howdy GSAP team! Just wanted to post a recently launched project using GSAP, specifically draggable and ThrowPropsPlugin. This is designed for mobile phones only so please check it out on your phone to get the full experience. http://www.crocs.com/spring thanks to Jack, Carl, and the whole GSAP community - always helpful and friendly! And thanks in advance for taking it for a spin Azuki
-
Hey GSAP team, I'm using the ThrowPropsPlugin and Draggable feature for a spinning dial of sorts. My dial will lock at 25.71 degrees (dividing a circle into 14 equal sections). I'd like to create a button that randomly spins the dial and stops at one of the defined sections. Has anyone created this kind of functionality or does anyone have any insight on how I might approach this? Also, in the GSAP dial example, the rotating image is a single "knob.png". My dial will have 14 different colors and I'd like each color to link to a new page. I realize this makes the dial a great deal more complex so I wanted to reach out for any suggestions on executing this elegantly. Thoughts? As always, thanks for any insight! azuki
- 4 replies
-
- throwpropsplugin
- draggable
-
(and 2 more)
Tagged with:
-
When I view this in codepen the text in box1 and box2 does not display. I copied the code to my texteditor at home it ran fine but the the text doesn't display there either. I don't know how I would address that text to give it a higher z-index or what I should do. Thanks in advance for any help. <div class="box" id="box1">Drag and throw me</div>
-
Hi guys, I was running a little test site in v11 and it was working fine except Draggable wasn't supporting IE11 touch events. No worries, I knew that. So then v12 came out, and I grabbed it and overwrote my .js files - but there's no ThrowPropsPlugin in the v12 package. I tried using the old one from v11 and got some unexpected behaviour - Draggable only fires on every second click or touch.
-
Hello, I was wondering, is there a way not to increase the property value infinitely, but to reset it back to it's minimum value when it reaches its' maximum and continue tweening? Say, I have an object with a property which I would like to "throw" with my mouse. But the thing is, the valid values for the property are from 0 to 10. So, if the value during the tween exceeds 10, I want it to go back to 0 and continue tweening until it stops. Thanks in advance.