So Let,s look at what we are going to build today in Flutter.

So let's look at our code.

If you want to know more about animation you can refer to some of my previous articles.

Our point of importance is two snippets of code below.

// first //FractionalTranslation(translation: Offset(1.0 - _animatedController.value, 0.0),child: child,);

// second //Transform.translate(offset: Offset(_animatedController.value * 200, 0.0),child: child,);

the second implementation was the first when I was able to achieve this and the first implementation was just trial and error which took a while but finally was able to do the job.

Our first implementation works with the Offset on the value of percent, which means (0.0, 0.0) is a translation with 0 offsets with both on the x and y-axis, and (1.0, 0.0) means a full available x co-ordinate on-screen. In our equation for the x-axis co-ordinate, we subtract 1.0 from the animation value, we know our animation controller value ranges from 0.0–1.0 as at the beginning of our animation start from 0.0, So for x in our offset, 1.0 - 0.0 = 1.0 which results in full offset from the x-axis while y has no effect

So here in our Transform.translate applies an absolute offset translation transformation instead of an offset scaled to the child.