Animating absolute position of elements that have matrix3d attributes applied

[hendrik]

I want to move a collection of DOM elements to a single spot. I have attempted to do so by animating the top and left property. When inspecting the element I can see that the inline styles are being set correctly to the elements, but they are not taking effect.

 

I am guessing this is to do with the fact that a matrix3d style is already applied, but I am having trouble identifying how I can fix it. Animating the x and y properties instead of top and left is not a solution because this only moves elements relative to their initial position.

 

Any tips?

 

My thanks in advance!

 

EDIT: I made a stupid error and was trying to move a child element when I should have moved the parent. Very sorry for wasting everyone's time.

[Jonathan]

Hello hendrik, and welcome to the GreenSock forum!

 

GSAP is able to parse the matrix() or matrix3d() and adjust the current transform and position of the element seamlessly, even during the middle of an aniamtion. CSS position offsets like top and left are only good for setting your initial position of the element in the CSS stylesheet. And then you animate with CSS transforms which are way better to use than position offsets which only use pixel snapping and no sub-pixel animation.

 

Please see the following articles on why animating CSS transforms are better than CSS position offsets:

• https://css-tricks.com/myth-busting-css-animations-vs-javascript/
   
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

It is always better to animate elements using x and y. If you choose to animate your elements with CSS position offsets like top and left. then your element will animate jerky due to top and left only animating on a pixel level and will cause re-layouts and re-paints to be triggered. If you animate with CSS transforms like x and y, then your elements will animate on a sub-pixel level, can use hardware acceleration and will animate smoother.

 

GSAP also has the special properties xPercent and yPercent for responsive animations.

 

Do you have a limited codepen demo example so we can see your code live and in context?

 

Here is a link to a GreenSock video tut on how to create a codepen demo example so we can better help you!

 

 

This way we can see what your talking about live in the browser to test.

 

[GreenSock]

In addition to Jonathan's solid advice, I wanted to mention that perhaps you forgot to set position:relative or position:absolute on your elements. That has nothing to do with GSAP - it's just that top/left won't take effect in the browser unless you set "position" like that. Again, a codepen demo would make it super easy to diagnose. 

[hendrik]

Hello hendrik, and welcome to the GreenSock forum!

 

GSAP is able to parse the matrix() or matrix3d() and adjust the current transform and position of the element seamlessly, even during the middle of an aniamtion. CSS position offsets like top and left are only good for setting your initial position of the element in the CSS stylesheet. And then you animate with CSS transforms which are way better to use than position offsets which only use pixel snapping and no sub-pixel animation.

 

Please see the following articles on why animating CSS transforms are better than CSS position offsets:

• https://css-tricks.com/myth-busting-css-animations-vs-javascript/

   

• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

It is always better to animate elements using x and y. If you choose to animate your elements with CSS position offsets like top and left. then your element will animate jerky due to top and left only animating on a pixel level and will cause re-layouts and re-paints to be triggered. If you animate with CSS transforms like x and y, then your elements will animate on a sub-pixel level, can use hardware acceleration and will animate smoother.

 

GSAP also has the special properties xPercent and yPercent for responsive animations.

 

Do you have a limited codepen demo example so we can see your code live and in context?

 

Here is a link to a GreenSock video tut on how to create a codepen demo example so we can better help you!

 

 

This way we can see what your talking about live in the browser to test.

 

 

Thanks for the warm welcome Jonathan. You have given me some ideas for restructuring my code a little. I am creating a little 'world' with randomly moving objects. If I would initialize each element on the page on exactly the same top/left location and then disperse them randomly using matrix3d() I would then be able to move all of them to the same spot quite easily using the same trick.

 

Currently each element has a different top/left position to start off with, so moving the whole collection in one go with x/y values in the animation parameter sends them all flying to a different spot.

 

Thanks again,

Hendrik

[Jonathan]

No worries, glad to help.. Happy Tweening!