Android Shared Animation with wrong starting position

I have two activities, splash screen and log in. I am using my logo image as shared animation element. When the app opens, the logo image is in the middle for about a couple of second and then it slides a few pixels left while shrinking to 85% of its size (Transition and scale animation). Simultaneously, on the right side, the name of my product appears using fade in animation. Once these transitions are over, I move on to next activity which is log in activity after a couple of seconds. Here, I am using the logo image as shared element. In log in screen, the logo image is on the far right. So, I expect this nice transition animation of the logo image from far left to far right. However, the initial position of the shared animation is the middle of the screen since my logo image started there in the splash screen activity. Is there any way to resolve this? I have attached 2 gif to help understand the issue. What I want: shared animation What I get: wrong starting position

Here is my transition animation code:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<scale android:fromXScale="1" android:fromYScale="1"
    android:toXScale="0.85" android:toYScale="0.85"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="300" android:fillBefore="false" />
<translate
    android:toXDelta="-300"
    android:duration="300" />
</set>

And my Activity code:

final Animation logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_translate);
final Animation logoFadeInAnimation = AnimationUtils.loadAnimation(this,R.anim.fadein);

new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        logoImg.startAnimation(logoMoveAnimation);
        logoName.startAnimation(logoFadeInAnimation);
    }
},2000);

new Handler().postDelayed(new Runnable() {          
    @Override
    public void run() {
        Intent i = new Intent(SplashScreenActivity.this, login.class);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(SplashScreenActivity.this, logoImg,"logo_transit");
        startActivity(i,activityOptionsCompat.toBundle());
    }
}, SPLASH_TIME_OUT);

The ImageView in Splashscreen Activity is:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:transitionName="logo_transit"
    android:paddingLeft="20dp"
    app:srcCompat="@drawable/heraclezlogo" />

And the ImageView in Login activity is:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:src="@drawable/heraclezlogo"
    android:transitionName="logo_transit" />

Any suggestion is appreciated.