cemycc

I understand now the behavior of edgeResistance. Thank you.

Update for other problem of mine described here http://forums.greensock.com/topic/8248-drag-new-element-from-the-div/#entry31916 . Now with the new functions startDrag and stopDrag I can set the position of the draggable center relative to the mouse position. On the mousedown event for the div i want to clone, I create the new clone and the draggable object then I just call startDrag. Thanks for this again.

Thank you for your answer. I still can't get the same effect like before. What I want is that when the draggable element is dragging outside the bounds he will keep his position outside. Right now when I release the mouse he gets back in his bounds. On older version the element was staying outside the bounds but he was dragging outside the edgeRessistance property was used. Now with liveSnap: true there is no edgeRessistance but still when I release the mouse the element goes back to the bounds.

Hello, 2-3 weeks ago when I had tested the draggable was working like this: I set up bounds to a div and edgeResistance to 0.9. When I was dragging the element outside the bounds it was possible to keep is position outside but with 'slow motion' because of edgeResistance. Now, I have updated the library and when I drag outside bounds It gets back to the bounds. I was looking on documentation and I think that the new method applyBounds() is called automatically on drag end.

Oh, I think you are right. on the startDrag event (mousedown) I just change the width and height and opacity at the same time. I don't know why I haven't think at it. And after I change the width/height I move the element to match his center with the mouse position using set function. When I am home, I will test it. Carl you are right to get the draggable's center to match the mouse position is tricky, the only method I figure it out to get it working is setting the draggable's element to position absolute.

Thank you, yes it is but the problem is that the new element can be smaller or larger and there are other elements near it ( like a list ) so they can overwrite the z-index if they are larger. To fix it I will need to make only the width/height of the base element to be draggable on the new one and after that I can move it to have the mouse pointer on center. I will need something like dragFrom: (0,0) to (x,y) or similar . If there is no solution I will need to make with mousedown(create element append), mousemove(move the element) . Thanks again for your time.

Hello, Thank for your answer and the code. Is not what I want, I have edited the pen so will ilustrate exactly what I want. The problem is that when I press the mouse down the new element need to be dragged again and I want to be dragged from the first time after I press the mouse down. http://codepen.io/anon/pen/uwEKJ

I was trying that now, but I still need to drag again the element. On DragStart I create the new div then I insert the div in dom and I move it at the position that I want and I create a new draggable event on it but to work I need to go over it again and drag it.

Hello, I have a list of divs and when the user want to drag the div I want to create a new div and that div will be draggable. The main div will keep his positions. How can I make this with the Draggable plugin ? I was trying to add a mousedown event on the main div and on that event I create the element and attach the Draggable event but is not working as expected, the user need to redrag that element to work.

Yes, is it working now. I am using the set function. Thanks for the help !

Hello, I move the element that have the dragged event on it with translate3d and I give the coords that I want. After, I click on it to move it again he will go back to the position where he was when drag have stoped. He don't start from the new position where I have moved it. This means that the draggable plugin saves the positions somewhere and he ignore the position from css, how can I change it ?

@rhernando I am trying to build a stage on what you can drag different elements and then you move them on that stage and after you hit play. Then they will start playing from the position where they had been dropped on the stage to the position where the user have finish moving the element. I understand now, from what I have learn today I will use translate to position my elements (they are draggable and before I was using jquery UI library for the drag,drop events but now i will write from scratch with mouse move/down/up). Just need to find a way to corelate the mouse positions and the ones from the dragged div. You where right, I was thinking that x and y are in relation to the first relative parent and the funny thing was that I haven't read about that on internet because was obvious for me to be like that. Also, for some elements I will need to make bigger paths, for example they will have like 150+,200 points. I was thinking to verify the distance between every group of 2 points and if the distance is lower than 2 or 3 to remove the point. It will be better for animation performance ? Also, I forgot to mention that I record the points with a delay of 15 miliseconds. And for canvas performance I bet that will be better to use the points that I get from bezierThrough() function rather than using quadraticCurveTo() function on every group of 2 points like i am doing right now. Thank you again for the help, I am learning new things everyday.

Thank you again for the fast reply. I got some free time and I wrote a codepan. http://codepen.io/anon/pen/tgjlH For the box element you will see that is position at 185,164 but when the animation start he goes down even if the positions on points array are similar The position on points array got generated from mouse moves on my site ( I can't write the entire code because I am using coffescript ) I have wrote only the part with the problem.

Thank you for your reply. @rhernando I still have the same problem, I will write a codepan as soon as I am back home from work. Also, I was thinking and reading some articles on internet, will be better if I have drag the elements with translate css property rather with top left ? Also on the div I will need to rotate it and change is size. Rotation and size will be also animated on the bezier path.

Hello, I have a div that have dimensions 1024x768 and position absolute on it. On that div I have one element with position absolute. When I move the element inside the div I save his position at every move of mouse then with this positions I want to animate the element on the path recorded by mouse positions. Also, when I move the mouse with the element I draw a path on canvas with ctx.quadraticCurveTo function using the points that I save from mouse move. The problem is when i use the bezier plugin with TweenMax the element change the initial position from the canvas path because for animation is used -webkit-transform: matrix(1,0,0,1,560,230). Also, I am using the Bezier plugin with the type cubic because this was the only type that can make almost correct animations. If someone have other sugestions how can I do this ? Because for some paths I save allot of points and maybe there is another method ? I was looking at bezierThrough() function for drawing the path on canvas but I don't know what function I will need to use. Thanks in advance for your help.

When you have time can you please show me an example ? Because I don't know if it will work when I will have the background color with opacity and the gradient from fade In/ fade Out with opacity too. I think that the gradient opacity and the one from background will overlap and will create an undesirable effect.

Because the background will change and it can be transparent also. For example if my background will be red with opacity 0.5 How I will make the gradient ? I was trying a gradient from red 0 to red 1 but will not show so nice on screen because of the transparent background.

Is the SplitText tool for JS too ? What about this method: I wrap every letter into a span class All the time I will have a function that checks if every letter if is a correct position (can I check this ?) . If is at that position I will the letter opacity (how can I make this with greensock ? a simple TweenLite with opacity property ?) The problem is that I have a interface where I can change the size of text, width of the container or separator distance. I will need to make some heavy calculations. Thank you for your answer.

Hello, I have this text slide http://codepen.io/anon/pen/zhmAH . I want to create a fadeIn/FadeOut effect on left and right margins when the slide occurs. The fade effect can be for any dimension just to have the first letters. I was trying to use webkit-mask with opacity or gradient but the problem is that my background color on widget will have opacity to and with this method don't look nice. So.. the only method is to have the effect on text but I don't know how to do that ( how to make the fade and how to find when the text letters are near the margins ) Thanks.

Thank you, normaly the content is dynamic generated. (The spaces between links on separator can be changed) . What about the way that I make the slider ? Is it a good way ?

Sorry, I have reproduced the code in JavaScript http://codepen.io/anon/pen/zhmAH . You will see that there is a little bug, but is not the same like on my application.

Hello, I have a slider of text but when the slider is at the end he creates a little jump over the text and then starts again as normal. I have created the slide like this: animateSlider : () => elWidth = @textM.find('.js-marquee:first').width() marqueeWrapper = @textM.find('.js-marquee-wrapper') reverRepeat = => @timeLine.reverse(0) reverComplt = => @timeLine.restart() animObj = { css:{"margin-left":"-"+elWidth+"px"}, ease:Linear.easeNone, onReverseComplete:reverRepeat, onReverseCompleteParams:['{self}'], onComplete:reverComplt, onCompleteParams:['{self}'] } marqueeWrapper.css('margin-left','0') TweenMax.killAll() if not @direction @timeLine = TweenMax.to('.js-marquee-wrapper', @speedSlide, animObj) else @timeLine = TweenMax.from('.js-marquee-wrapper', @speedSlide, animObj) elWidth is the width of the div that will slide. ( I have cloned this div into a wrapper to get the effect of circular ) . The div js-marquee-wrapper contain 2 divs js-marquee that have been cloned. I am using CoffeScript.