[Taking the plunge]

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.

[Compare Draggables in different divs]

You have a point @ZachSaucier.

Let me try it out with a table. Sometimes it is the easier things that escape our attention.

 

2 hours ago, ZachSaucier said:

What's your question related to snapping?

I was wondering if I could use snapping to associate a draggable with the div it is "in".

 

2 hours ago, ZachSaucier said:

Also in childrenGames shouldn't "Hula hoop" match with a value of "Hoop"?

It does now. 😅

[Compare Draggables in different divs]

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.

See the Pen YzXpOQE by Afrowave (@Afrowave) on CodePen

[GSAP 3.2 Draggable vs GSAP 2.1 Draggable]

Just looked at the solution again.

Logic errors you say, @OSUblake? You are being polite. Thank you again.

[GSAP 3.2 Draggable vs GSAP 2.1 Draggable]

@OSUblake,

Wow! 

Quote

It would be quite limiting if gsap only worked with stuff that had an ID.
...
You just have logic errors. You can't run a hit test on something that doesn't exist.

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! 😆

[GSAP 3.2 Draggable vs GSAP 2.1 Draggable]

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. 

[GSAP 3.2 Draggable vs GSAP 2.1 Draggable]

Quote

1. You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both. 
2. Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago. 
3. You've got throwProps/inertia enabled which means it'll create a tween onRelease but you ALSO created a [conflicting] tween at the same time. The default overwrite mode in GSAP 3 is false. You have to opt-in to overwriting. If you want it to automatically find (and kill) conflicting tweens, just set overwrite:"auto" on your tween(s) or do it globally like: gsap.defaults({overwrite:"auto"});

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.

[GSAP 3.2 Draggable vs GSAP 2.1 Draggable]

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

See the Pen YzXpOOL?editors=0010 by Afrowave (@Afrowave) on CodePen

. 

 

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.

See the Pen YzXpOQE?editors=0010 by Afrowave (@Afrowave) on CodePen

[TweenLIte.killDelayedCallsTo() replacement?]

Dear Greensocksers, 😀

 

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

[DrawSVG Set Position]

Thank you very much @OSUblake and @ZachSaucier. I did build the SVG path on the fly with path completion.

 

See the Pen QWWLMvy?editors=0010 by Afrowave (@Afrowave) on CodePen

[Control Scrolling of a div using an audio track]

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

[Control Scrolling of a div using an audio track]

21 minutes ago, GreenSock said:

Hey Jack,

Thanks for the tip. I suspected there should be something like that, because you guys think of things like that. ?

 

 //note that the target must be a DOM element, not selector text.

Do you mean that the target should be referenced by a getElementById() and not a querySelector() ?

 

[Control Scrolling of a div using an audio track]

???

 

Thanks Zack. Have an excellent day.

[Control Scrolling of a div using an audio track]

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. 

[Control Scrolling of a div using an audio track]

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.

[Control Scrolling of a div using an audio track]

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" ?

[Control Scrolling of a div using an audio track]

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. 

[Control Scrolling of a div using an audio track]

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? 

See the Pen zYYJrjY by Afrowave (@Afrowave) on CodePen

[Draw arrow with moving arrowhead, crossing paths]

Wow! Thank you @ZachSaucier. Let me check it out.

 

[Edit] I checked it out. Damn! You guys aren't playing. This is excellent.

[Draw arrow with moving arrowhead, crossing paths]

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.

[Draw arrow with moving arrowhead, crossing paths]

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 ?

[DrawSVG Set Position]

2 minutes ago, OSUblake said:

You aren't using a valid target. Like this.

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?

[DrawSVG Set Position]

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.

 

[DrawSVG Set Position]

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?
 

See the Pen QWWLMvy?editors=0010 by Afrowave (@Afrowave) on CodePen

 

[DrawSVG Set Position]

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.  ?

 

Quote

Just build the path on the fly.

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. ?