Animation in ScrollView which is expanding from the bottom of the page?

Hi Everyone, I am looking to manipulate a ScrollView which I've set with a VerticalOptions of "End", and I have add a stacklayout with its children(by default the visibility of the children is false accept the first) so that when I turn the visibility true at runtime it 'grows' from the bottom.

However, when content is added to the ScrollView, the new content appears immediately with no animation.

Any thoughts on how to animate the growth of the ScrollView as the new content's visibility turns True? Ideally I'd like it to slide up, like the animated scroll when it's full.

<ScrollView x:Name="mainScroll"  VerticalOptions="End" VerticalScrollBarVisibility="Never" Margin="25,0,25,0">
         <StackLayout Orientation="Vertical">
               <StackLayout x:Name="childgrid1" Margin="0,115,0,30">

                    <Grid>

                     <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100*"/>
                        <ColumnDefinition Width="100*"/>
                    </Grid.ColumnDefinitions>

                    <Label x:Name="Onblbl1" Grid.Row="0" Text="{resources:Translate Onblbl1}" CharacterSpacing="2" FontSize="30"  TextColor="#fff" Grid.ColumnSpan="2">

                    </Label>

                    <Label x:Name="Onblbl3" Grid.Row="1" Text="{resources:Translate Onblbl3}" FontSize="13" TextColor="#fff" Grid.ColumnSpan="2">

                    </Label>

                    <Label x:Name="Onblbl4" Grid.Row="2" Text="{resources:Translate Onblbl4}" Margin="0,45,0,0" FontSize="23" TextColor="#fff" Grid.ColumnSpan="2">

                    </Label>



                    <Image x:Name="imgCat" Grid.Row="3" Source="CatUnselected.png" Grid.Column="0" Margin="0,64,52,0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                        </Image.GestureRecognizers>
                    </Image>

                    <Grid Grid.Row="4" Grid.Column="0" Margin="50,13,50,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{resources:Translate lblcat}" Grid.Row="0" Grid.Column="0" x:Name="lblcat"  FontSize="11" TextColor="#949494">

                        </Label>

                        <Image x:Name="CImage" Margin="0,6,0,0" Grid.Row="0" Grid.Column="1" WidthRequest="5" HeightRequest="5" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Source="check.png" IsVisible="False"/>


                    </Grid>

                    <Image x:Name="imgDog" Grid.Row="3" Source="dogInactive.png" Grid.Column="1" Margin="0,64,25,0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                        </Image.GestureRecognizers>
                    </Image>
                    <StackLayout Orientation="Horizontal" Grid.Row="4" Grid.Column="1" Margin="65,13,50,0">
                        <Label Text="{resources:Translate lbldog}" x:Name="lbldog" FontSize="11" TextColor="#949494">

                        </Label>

                        <Image x:Name="DImage" Margin="0,6,0,0" HeightRequest="5" WidthRequest="5" VerticalOptions="CenterAndExpand" Source="check.png" IsVisible="False"/>
                    </StackLayout>
                </Grid>
            </StackLayout>
            <StackLayout x:Name="childgrid2" IsVisible="False" Margin="0,35,0,30">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="28" />
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Label x:Name="PetName" Text="{resources:Translate PetName}" Grid.Row="0" FontSize="23" CharacterSpacing="0" TextColor="#fff">

                    </Label>
                    <customEntry:LineEntry x:Name="entPet" BorderColor="Gray" Grid.Row="1" Unfocused="entPet_Focused" BackgroundColor="#1E2027" FontSize="39" CharacterSpacing="0" TextColor="#fff" />
                </Grid>
            </StackLayout>

            <StackLayout x:Name="childgrid3" IsVisible="False" Margin="0,0,0,2">

                <Grid Margin="0,80,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="28"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="300"/>
                    </Grid.ColumnDefinitions>
                    <Label x:Name="lblgender" Text="{resources:Translate lblgender}" Grid.Row="0" Grid.ColumnSpan="2" FontSize="23" TextColor="#fff" CharacterSpacing="0">
                        <Label.FontFamily>


                        </Label.FontFamily>
                    </Label>
                    <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical" Margin="0,12,0,0">
                        <Label x:Name="lblMale" Text="{resources:Translate lblMale}" FontSize="35" TextColor="#949494" CharacterSpacing="0">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>
                            </Label.GestureRecognizers>
                            <Label.FontFamily>

                        </Label>
                        <Image x:Name="imgmale" IsVisible="False" Source="path38Mcopy2.png"  HeightRequest="6" HorizontalOptions="StartAndExpand" Margin="0,-10,0,0"/>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="1" Orientation="Vertical" Margin="55,12,0,0">
                        <Label x:Name="lblFemale" Text="{resources:Translate lblFemale}" FontSize="35" TextColor="#949494" CharacterSpacing="0">

                            <Label.FontFamily>

                            </Label.FontFamily>
                        </Label>
                        <Image x:Name="imgFemale" IsVisible="False" Source="pathF38Copy.png" HeightRequest="6" HorizontalOptions="StartAndExpand" Margin="0,-10,90,0"/>
                    </StackLayout>

                </Grid>
            </StackLayout>
        </StackLayout>
    </ScrollView>

void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)
{
//Thread.Sleep(1000);

        imgCat.Source = "CatSelected.png";
        lblcat.TextColor = Color.FromHex("#ff702c");

        CImage.IsVisible = true;
        flag = false;

        //inactivating the dog
        imgDog.Source = "dogInactive.png";
        lbldog.TextColor = Color.FromHex("#949494");

        DImage.IsVisible = false;

        // mainScroll.ScrollToAsync(0, 90, false);
        // childgrid1.FadeTo(1, 500, Easing.CubicIn);
        Device.BeginInvokeOnMainThread(async () =>
        {
            await Task.Delay(1000);
            childgrid2.IsVisible = true;
        });
    }

I have took the reference of https://stackoverflow.com/questions/55415492/xamarin-forms-scrollview-animate-its-growth-as-it-expands but it didn't help me.

Please suggest the better solution.