[Move an element from one div to another?]

Just wanted to say thanks again. Here's my little 'proof of concept' (I still need to learn css properly). Click to 'merge' the arrays.

 

See the Pen GdyRJM?editors=1111 by codeminion1 (@codeminion1) on CodePen

 

[Move an element from one div to another?]

That response was just amazing thank you so much.

[Move an element from one div to another?]

Thanks, for the example. This does what I need!!!

 

I'm noob to javascript so one thing is confusing me. Why doesn't:

 

this.appendChild(box);

 

cause the box to move over and flicker for an instant and then move back and tween?

 

I guess, does this whole function have to run before the browser re-evaluates anything and that's why it works?

 

Or is there somewhere I can read how TweenMax actually does the tweening? I think I'm just treating this tween as a black box right now but don't understand how it's actually updating the css or how the browser actually evaluates what to put on screen.

[Move an element from one div to another?]

Noob question...

 

I want to make an animation of array elements 'merging' (like in mergesort).

 

My plan was to have 2 containers:

Array1 - initially 5 child divs (created in javascript) that are the elements

Array2 - intially 5 child divs (created in javascript) that are the elements (different color)

 

Array 3 -initially empty - (will end up being the 'merged' array)

 

Now, I want my elements to 'fly' out of array1 and array2 and into my initially empty 3rd array.

 

I want them to just end up wherever they would be if I just put them there directly using javascript (attach them to child element).

 

 

I can't figure out the 'GSAP way' to do this.

 

I can think of 1 solution (maybe?):

 

1. put an invisible element in array3

2. figure out the relative positions.

3. create the tween with a callback that goes and access the elements and changes it from being a child of e.g. array1 to array3

 

Is this a sensible thing to do? Or am I just not thinking about this the GSAP way?

 

 

Thanks for any help.