reordering with flex and GSAP3

[Dominique]

Hello,

 

I was using until now TweenLite to animate boxes reordered via the order flex property and it's still working well. 

 

However, reading this (

), I understand it's time to migrate to GSAP.

 

Could you tell me how to adapt this script () to make it "GSAP-3" compatible ?

 

The same code can be found here : https://gist.github.com/sttt/7740bd213f1618bb8479ce9b8220af18

 

I can make it work replacing TweenLite.fromTo with gsap.fromTo and loading the appropriate library, and replacing the lines

var x = box.transform.x + lastX - box.x;
    var y = box.transform.y + lastY - box.y; 

 

with

var x = lastX - box.x;
    var y =  lastY - box.y; 

 

because the transform property has no value attached anymore.

 

Yet the first time it launches, the animation is a bit odd. So I'm trying to find the transform value back. 

 

 

 

 

 

 

Thank you very much for your help.

 

Dominique

See the Pen eJGrPN by osublake (@osublake) on CodePen

[akapowl]

Hey @Dominique - welcome to the forums.

 

With GSAP3 that could look something like this

 

 var x = gsap.getProperty(box.node, 'x') + lastX - box.x;
 var y = gsap.getProperty(box.node, 'y') + lastY - box.y;  

 

See the Pen 41cf42a1d4d0bb575060182c43edd5fb by akapowl (@akapowl) on CodePen

 

 

 

Related topic here:

 

 

[Dominique]

Thank you very much Akapowl, this was really helpful!