Move an element from one div to another?

[codeminion1]

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.

 

[Sahil]

Here is how you can animate element as you change it's parent. You can do that by recording element's old and new position using getBoundingClientRect and then animate the difference using from tween.

 

See the Pen OZOWqG?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Great demo, Sahil!

 

 

[codeminion1]

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.

[Sahil]

Nice question. I have had similar question but never bothered too much about it because it works. I will try to explain with what I know.

 

JavaScript runs in a single thread so it will execute all statements before rendering/updating the page. So let's say on click event you are executing a function, JavaScript will execute all the statements before rendering the layout. In following demo you can see a there is a loop that executes 10 times it executes 20 statements of TweenMax and many more that you don't see from library. In console you can see that it takes about 2-8 miliseconds to execute the loop, it can vary depending from system to system. Once all statements are executed then browser will update the layout with any changes that occurred.

 

Now for your animation to run at 60FPS browser must update any changes every 16 milliseconds so if you are doing a lot of animations that take more than 16ms, it will start degrading the performance by dropping the frames because JavaScript is busy executing other stuff. In demo, If you change the count to something like 5000, you will see that it takes browser about 1500ms to execute the loop. If you log the performance of the page using devtools you can see that for that time browser never rendered anything so no question of seeing jumps, just horrible user experience.

 

 

See the Pen Xqzxpo?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

Interestingly, just today a video was published about whole JavaScript event loop that talks in detail how JavaScript is executed, I haven't seen the video yet but it will be worth watching. You will find a lot more videos on that channel about everything in details.

 

 

An article that talks about rendering and performance in details, https://developers.google.com/web/fundamentals/performance/rendering/

 

Another article worth reading that talks about how different scrolling methods affect the performance https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

 

Another thing is how animating certain properties affects the layout, for example if you animate left, top, height or width it will trigger the layout and browser will have to recalculate entire page. While animating transforms won't cause layout trigger in most browsers. On following page you will find list of browsers and what property triggers what, so you want to avoid those triggers wherever possible for better performance.

 

https://csstriggers.com/

 

About how animations work, at core GSAP just calculates over time with different easing formulas and set those values on the element. So basically you can animate numbers of any object, that's why it is very easy to use GSAP to animate different libraries like Three.js, PIXI js etc. GSAP uses the requestAnimationFrame function which makes sure everything animates at constant frame rate given that you don't animate too many pixels at once.

 

Following is simple demo of how you can ease using simple Math,

 

See the Pen PeOydK?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

But of course GSAP does a lot more than simple easing, it makes sure that your animations execute at exact duration that you set and a lot of other work to work around different browser inconsistencies.

[codeminion1]

That response was just amazing thank you so much.

[codeminion1]

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

 

[OSUblake]

If you've ever heard about the FLIP animation technique, that's basically what @Sahil was showing you.

https://aerotwist.com/blog/flip-your-animations/

[Sahil]

Quote

If you've ever heard about the FLIP animation technique, that's basically what @Sahil was showing you.

 

   I thought you will never mention FLIP on forum again.

[OSUblake]

16 minutes ago, Sahil said:

   I thought you will never mention FLIP on forum again.

 

Hehe. I think most of the confusion surrounding it has been clarified, so it's OK to use again.