Afrowave

What?! No React? ? There is a project I have been working on for some time @msagerup and these GreenSock guys here are the best. I wanted to use React just for the routing within the app but the client did not care. So I have been forced by the nature of the work to learn JavaScript itself, DOM APIs and CSS just as @OSUblake said. I can feel your excitement, especially if you see the GreenSock showcase. But get a solid base with JavaScript and GreenSock will be a breeze. It just makes sense when you work with it. Give yourself 3 to 6 months, depending on how much time you have.

You have a point @ZachSaucier. Let me try it out with a table. Sometimes it is the easier things that escape our attention. I was wondering if I could use snapping to associate a draggable with the div it is "in". It does now. ?

Hi GreenSocksers, I have a very interesting project as you have noticed by now. ? In this case, I need to compare an element in one cell with another. I have a game-name draggable on the left side of the table and the game-tool draggable used to play the game specified by the left-side game-name on the right side of the table. I have an object with the contents of the matched IDs of the draggable buttons, consisting of the game names and the game tools. As it is now, a game-name settles on the left side of the table and a game-tool settles on the right side of the table. I have the first line with Racing and Hurdles already done manually to give a visual of what is intended. Basically, once a game-name draggable settles, it should check for whether the game-tool draggable in the next div node corresponds to tool used in the game and vice versa for a game-tool settling first. I was thinking that if I can find a way to make the draggable have a relationship with the div it settles in, I can then compare the IDs of the draggables with an object that has all the relationships. I went through the GSAP Docs, and I was whether Snapping can be used for something like this.

Just looked at the solution again. Logic errors you say, @OSUblake? You are being polite. Thank you again.

@OSUblake, Wow! I know! I think I was a bit dramatic but I could not see the trees in the forest. Everything was a blur! ? Thank you and thank you Jack@GreenSock. GSAP is brilliant. With all due respect to the competition, there isn 't any! ?

Now to the "meat and potatoes" of the question. In Draggable 2.1, I am targeting the top left div with the id of Dev_1. With this target in place, my buttons can tween back to place when dragged slightly off their original position. If the button is dragged onto the table, it behaves at is should in this case, if it does not get to the target div, it goes back to its origanal place. Very good. In Draggable 3.2, I have set the target to be any div that has the class of addRed. There is a slight difference here. If the button goes onto the table it behaves as it should because there is a specific target based on the denoted class. Very good. But, if you drag the button, say, in between the other buttons, it is not able to tween back to its original position. Hence the question, before the button enters the table and before the target div is highlighted, why is the now off-original location, dragged button not able to tween back to its original position when released? It seems that the dragged button must have a predefined target that is identified with an ID, to be able to tween back to its original location, even if it does not come close to the designated target, to answer @Friebel. I hope that makes sense.

1. Changed Draggable to 3.2. I hadn't noticed. 2. The Old GSAP was taken from one of your old posts. It was for demonstration. ? 3. I removed Inertia from GSAP 3.2 and now it works as it should. I had not idea of the conflict. Of course, I am activating two tweens onRelease and onDragEnd.

Dear Greensockes, ? Draggable of GreenSock 2.1 is only able to specify its target option element through an Id. If you target the first of a bunch of divs with classes only, it gives this error “Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null”. So I decided to try GSAP 3.x and the latest and greatest 3.2. But I found another quirk, for lack a better word. The code pen attached is an exact replica of one done in GSAP 2.1 here. The gsap.to() that replaces the TweenLite.to() does not seem to work as it should. In my case, if the draggable button does not get to the target, it is to TweenLite.to(button, 0.3, {top: button.originalTop, left: button.originalLeft}) back to its original position. If it does get to its target, it is to TweenLite.to(button, 0.3, {left: target.left, top: target.top, x: 0, y: 0}. If it does the button in GSAP 3.2 gets offset in an arbitrary way. Something changed. But I don't know what.

Dear Greensocksers, ? Is there an exact replacement for the `TweenLIte.killDelayedCallsTo()`?

Thank you very much @OSUblake and @ZachSaucier. I did build the SVG path on the fly with path completion. The final "Trace SVG by joining the Dots".

I see. That means it should not be like how jQuery does it?

??? Thanks Zack. Have an excellent day.

Nice, very nice. You guys have made GSAP so easy. Is scrollContainer part of scrollTo variables? Is this documented somewhere that I can't seem to find? I am beginning to feel not too clever.

If you go to the pen, it would fit into something like this: function Update(){ scrollDiv.progress( aud.currentTime/aud.duration ); scrollDiv.to("#Scroll_Text", 10, {scrollTo:{y: scrollDiv.progress() * "max"}}); }; That way, I don't have to keep guessing how long the inner content is so that the scrolling action fits perfectly all the time.

Hey @ZachSaucier Thanks for the tip. I got some sleep and voila! What was getting me stumped is how the time variable was going to work. Clearly once you are using the plugin object, the time variable is suspended. I can't, for the life of me, remember why I had not noticed that. I must say, GSAP is that hammer that makes everything I see a nail! ? I got what I wanted. One thing left. Is there a way to get the y:"max" as a value into say, scrollDiv.progress() * "max" ?

Hey Zach, I am sorry, I was experimenting, trying to see how everything else works. Let me clean it up and work with the scrollto object.

Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?

Wow! Thank you @ZachSaucier. Let me check it out. [Edit] I checked it out. Damn! You guys aren't playing. This is excellent.

Sorry for not being clear. I would like to drag an arrow head from a base and the tail lengthen over time. Upon reaching the target, the arrowhead, onRelease, "sticks to the target and we are left with an stretched out arrow. I called real time because I would be drawing the arrow with a mouse or touch drag. I hope that makes sense.

Very nice @mikel, very nice! I was wondering whether this can be done in real time and upon release the arrow remains drawn, like in an drawing program, or does this have to be done with a canvas tag and not an svg ?

Thanks @OSUblake. Yes, I know and I have said so. The glitch is exactly what I want by the looks of it, not by how it works. The question is, why is the Tween involved in rendering of the SVG and yet there is no valid target?

Thank you @ZachSaucier ! I never knew about XML namespaces. My SVG know how is moving along very well, thanks to you. I got Interesting glitch. I put in your code into mine and forgot to change the Tween target. What I have now is the linePath redrawing itself on every subsequent element click. When I comment out the Tween, it then behaves like your code but the SVG being rendered by the browser based on the path information. It looks very nice and looks exactly like what I want with the Tween and the wrong target. My problem is I can't understand how drawSVG is doing. https://codepen.io/Afrowave/pen/QWWLMvy

Hey @ZachSaucier and @OSUblake, Thank you guys for being patient with this. I have got to the place where I am making multiple svg paths on the fly and I am able to set up the points that DrawSVG is meant to draw across. But there is a hitch. It looks like I need to implement an "async - await" on the Tween that is drawing out the path, but I am not sure. What do you guys think? https://codepen.io/Afrowave/pen/QWWLMvy?editors=0010

Guys, guys ... ? I was in the middle of working out something like what @ZachSaucier has proposed ... let mapDot = { "Dot_1, Dot_2": "Trace-01", "Dot_2, Dot_3": "Trace-02" }; var max = 100; var duration = 1; TweenLite.set("path", { drawSVG: "0" }); var firstVal; var secondVal; var state = 0; document.body.addEventListener("click", e => { if (state === 0) { // The "start from" click TweenLite.set("circle", { fill: "#88ce02" }); TweenLite.set("path", { drawSVG: "0" }); // Update values state = 1; firstVal = e.target.id; TweenLite.set(e.target, { fill: "#f00" }); } else if (state === 1) { // The animating part state = 2; secondVal = e.target.id; TweenLite.set(e.target, { fill: "#00F" }); line2Trace = firstVal + ", " + secondVal; traceLine = "#" + mapDot[line2Trace]; myTween = TweenLite.to(traceLine, 1, { drawSVG: "100%", onComplete: function() { state = 0; } }); } }); I was looking at the generating the dot coordinates to allow a clockwise and counter-clockwise direction and adding a TimelineMax that I could ti.add() to it. Only for @OSUblake to blow everything out of the water. ? He says ... Thank you Blake. You have made me realise that I am not using my math as much as I should and getting beyond basic shapes and lines in SVG. Let me get to work. I will definitely post my solution here. ?