Search the Community

Hey guys, long time no see I'm getting back into GSAP and came across something that I think is a bug. I have a very basic container with substantial vertical padding that I'm trying to add `scrollTop` animation that uses GSAP's `throwProps` functionality. However, it seems to be breaking the scroll functionality, presumably due to the substantial vertical padding that I have. Note that you need to click/drag or touch/drag to have this behavior come into effect. Am I doing something wrong or is this a bug? P.S. How do I do inline code formatting in this editor?

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!

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!

Hello, I have a simple object I would like to 'throw' to simulate a scroll on a mobile device. While the object can be dragged, the throw simulation does not appear to be. Are their certain controls I am missing? Draggable.create("#square", { lockAxis:true, type:"y", onDrag:function( ){ }, throwProps:true }); //I am using these libraries: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});

Hello! Based on the rotation property of the wheel, I'd like to change the HTML content based on the segment that it lands on. I've used the rotationSnap var but I'm unsure how to call it's value based on the end position to then alter the HTML. I'd also ideally like to set-up each segment as a separate div so I can then easily place content into them such as the title of the colour etc. I'm fairly new to GSAP (and js to some extent) so I would like a bit of guidance on how achieve this. Many thanks!

What I'm going for: When an element reaches the edge of it's boundary box, it re-positions itself at the other edge of it's boundary box. If thrown, it will maintain velocity. I'm using .set and it's removing velocity. I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!

I'm trying to make a looping Draggable that snaps and only moves one step at a time. The problem is that with throwProps switched on, the user can throw it more than one 'step' at a time, and with throwProps switched off it doesn't snap at all. I used this pen as a starting point: http://codepen.io/osublake/pen/ee107aeb54bdf4dca1084715d86b5e9c Here's where I've gotten to: http://codepen.io/lewisSME/pen/mWQoye Any help greatly appreciated.

Hi, It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time. Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time. My thought process of creating this animation is: head and tentacles rotate, scale and move -- the original state, stored in the original function function original() { tlAll .to(total, 30, { bezier:path, ease:Power2.easeInOut } ); tl .fromTo(head, 3, {scale: 1, y: 0}, {scaleX:.8, scaleY:1.2, autoAlpha: .8, ease:SlowMo.config(20)} ); feetLeftTl .to([top_first_left, bottom_first_left, top_sec_left, bottom_sec_left], 3, {y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}); feetMdTl .to([top_middle, bottom_middle], 3, {y: 10, scaleX: 0.8}); feetRightTl .to([top_sec_right, bottom_sec_right, top_first_right], 3, {y: 10, scaleX: 0.8, rotation: 10, ease:Sine.easeInOut}) .to(bottom_first_right, 3, {x: -4, y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}, 0); TweenMax.to("#light feGaussianBlur",3,{attr:{stdDeviation:5},repeat:-1,yoyo:true}); } the whole jelly fish can be dragged to move towards left or right, during which the head and tentacles rotate slightly to the other direction to create a sense of water resistance when the dragging is finished, the jellyfish should go back to its original animation -- the part that I can't figure out Draggable.create("#total", {type:"x,y", edgeResistance:0.65, bounds:"svg", throwProps:true, autoScroll:true, onPress:function() { startX = this.x; startY = this.y; }, onDrag:function () { var xChange = this.x - startX; var yChange = this.y - startY; if(xChange < 0) { //to the left TweenMax.to(head, 1, {rotation:5}); TweenMax.to(feet, .6, {y: 15, rotation:-10}); } //to the right else { TweenMax.to(head, 1, {rotation:-5}); TweenMax.to(feet, 1, {y: 10,rotation:15, ease:SlowMo.easeInOut}); } }, onThrowComplete: function () { var reset = new TimelineMax(); // // // reset var newhead = new TimelineMax(); var newfeet = new TimelineMax(); newhead.to(head, .5, {rotation:0}); newfeet.to(feet, .5, {y:10,rotation:0}) reset .add(newhead,0) .add(newfeet,0) .add(feetLeftTl,0) .add(feetMdTl,0) .add(feetRightTl,0); }, }); But now, the tentacles stop rotating and scaling after the jellyfish being dragged and I checked the code over and over again but could not find a solution. Please advise on this problem. Thank you so much!!

hello folks first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions. best regards jakob

Apologies if this has been covered before, could't locate it in the forums or on StackOverflow etc. Currently working on a nice little horizontal slider that controls animations for an e-learning project. Unfortunately we work for big pharma who still mandate IE8 support (I know ). Anyway, it seems I've come across a little bug where on using the onThrowComplete method to calculate the end position via this.endX / this.maxX * markers.length fails in IE8. On closer inspection is appear this.maxX returns NaN in IE8. Anyone have any ideas as to what's happening? Cheers

Hey all , I was doing a little experiment with Draggable and throwProps so the user could throw the draggable to a position and get a new panel from an info slider and I see a strange quirk in Internet Explorer. I'm using three snap positions [150,350,550] and then based on the index of the final snap position, I grab a new information panel to be shown, but IE sometimes ends on a number that is not in the snap array, but rather a lengthy decimal equivalent. I'll get 349.803101087 instead of 350. This results in my index query coming back as 0 so it flips back to panel 0. I see the problem and the fix is an easy Math.round(), but I found this odd and I'm curious if it was just Internet Explorer being its usual troublesome self or why exactly it won't consistently land on a whole number since it should be coming from the snap array. This is only happening in Explorer (FF and Chrome are fine) and not on every throw. I've put a console.log() in the code to show the final position so please watch that as you throw the draggable around. It might take a few attempts to produce the odd behavior. Again, easy fix - just more curious what causes it. Thanks.

I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning heaps and loving it.

Hi Guys, I'm trying to make a little hockey game using the draggable/throwprops plugins. I get that you can do hit detection while a draggable element(puck) is being dragged. But I need to do a hit detection on an object that is thrown (check to see if the puck has hit the posts, or is in the net etc). Any advice on where to start?

Hi there, I'm making an installation piece which has a stagesize of 7770x1080 (basically 4 HD touchscreen monitors in a row with 30 px space between each ). I've been looking for a supersimple throwprops example that would just let me drag a movieclip along the x-axis for this, but I can't find one apart from the one on the site, and that one uses blitmask. I'm guessing a blitmask would be counterproductive covering such a stage-size. Is there an example somewhere that you know of that would just permit me to see the syntax for as3 throwprops the way it's featured in the js version of it? I just need to be able to throw a movieclip around the stage to understand it, I think. Basically I would be out of trouble if I understood draggable and throwprops in as3, and I'm pretty lost just using the docs. any help would be appreciated! cheers edit: Oh wow, a mind boggling blitmask of that size isn't such a cpu eater afterall. This is amazing stuff you've built here. I used your example and threw something together I can use. You gentlemen came up with some rather jaw-dropping stuff here. All Hail the Green Sock !

I can get position values during a drag (using Draggable). But can I get position values during a Throw (using throwProps)?

There is an issue with the throwprops plugin doesn't work with Air sdk 17.0.0.172. Is anyone aware of this and if there is an upate to Greensock. I was having problems with the swiping motion in some places of my app where the scrolling motion would not give the appearance of movement. I have a book app where I'm adding pages dynmically and when the user swipes the pages, they appear as one continuous page. In places where it does not work correctly, the pages just appear, as if tapped and not swiped in a continous motion.

Is it possible to set snapping onDragEnd? I've tried... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = function(){ return 0; } } } and... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = [0]; } } but neither seems to work. I'm guessing this is because the snapping tween is created before this point, any ideas? Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.

Hi I'm using the Draggable Util to create a spinning wheel, and using the throwProps:true property. When I listen for the snap function, the endValue is being incremented for each spin of my wheel. Is there a way to reset this after each spin? Thanks Dan

hi, Can i use 'onComplete' on ThrowProps plugin? I want to call a function when the ThrowProps animation finishes. Is this possible? Thanks.

Hi, I've been trying to find a way to predict where throwprops tween will finally land (absolutely stops): I did my own velocity detection via ThrowPropsPlugin.track(...) at touch-up event, i run something like : ThrowPropsPlugin.to(target, { throwProps:x:{velocity:1200,min:0,max:800}}) I need to do something based on whether 'target' x final resting position is within certain value. Is there simple way to do this ? I looked at the .calculateChange() but that seems to require .calculateDuration() first, and I was not sure using those two is the right thing to do or will yield the best/accurate result... Thanks!

Hey everybody, I am trying to make my background scroll smoothly according to the user's drag, window (stage) is 800 by 480, background (lvl1_blitmask) is 2400 by 480 It's scrolling quite nicely, but not perfectly, it skips and jumps around toward the right side of stage. It is surely a matter of the maths involved, im afraid i just comprehend where... Here is the code: function mouseMoveHandler(event: MouseEvent): void { if (blitMask.bitmapMode == false) { blitMask.enableBitmapMode(); } var x: Number = this.mouseX - xOffset; if (x > bounds.left) { lvl1_blitmask.x = (x + bounds.left) * 0.5; } else if (x < bounds.left - xOverlap) { lvl1_blitmask.x = (x + bounds.left - xOverlap) * 0.5; } else { lvl1_blitmask.x = x; } blitMask.update(); var t: uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { x2 = x1; t2 = t1; x1 = lvl1_blitmask.x; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event: MouseEvent): void { lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var xVelocity: Number = (lvl1_blitmask.x - x2) / time; ThrowPropsPlugin.to(lvl1_blitmask, { throwProps: { x: { velocity: xVelocity, max: bounds.left, min: bounds.left - xOverlap, resistance: 1000 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 10, 0.5, 1); I have also uploaded the flash cc file, Thanks anybody who can spare a sec, LeonardTheLeopardV2.zip

The ThrowPropsPlugin API page contained an example of using it for scrolling a page vertically, and the throw props web page contained an example for doing horizontal panel transitions that animate entire panel movements right and left. Both of these work extremely well. But when I combine them, I run into problems that both of them are acting on mouse up and mouse down events, which means neither is working as intended. Add some interactive objects to the scrolling page, and it only gets more complicated. I think the solution is to write a singleton class that interprets mouse down, mouse move and mouse up events on the stage and infers user intent so that is can dispatch an event to either the scroller, or the panel slider, or the interactive object in the scroller viewport. My past experience with mouse events is limited to listening for clicks. So, if there is any example code that would point me in the right direction, I would be very happy to know about it.

Hi guys, I can't seem to find Draggable & ThrowProps plugin for AS3? http://www.greensock.com/draggable/ Is that because there's another alternative method somewhere in the AS3 library that gets that wheel spin effect? Thanks

I notice that your examples of scrolling using ThrowProps pretty consistently listens for mouse events on mc.stage.add…. where mc is the container being scrolled. And I notice that listening on the stage makes the listeners very responsive. This works fine if the entire stage is being scrolled, but usually this is not the case. The performance of the scroller seems to be very much affected by how quickly the listener receives the event. Two possibilities of how to deal with this come to mind. One approach would be to find the display object that is the correct bounds and closest to the stage. In some cases this might be the scroller itself. In my case the parent of the scroller is always the correct size. The other option would be to listen on the stage, and check the target to see if the scroller is an ancestor. Do you recommend one approach over another? Or, do you have another to suggest? I apologize if this question is too general, and understand if you would prefer to pass on it.