Animate background image independent of the foreground


#1

I’m trying to animate the scaleX and scaleY of a background image but leave the foreground controls unaffected as shown in this video:

https://www.youtube.com/watch?v=YzaTuxpk5Cc

Unfortunately, it appears the XML used in the video doesn’t work. If I use something like in the video:

<GridLayout id="outerWrapper">
		<GridLayout id="background" scaleX="1.6" scaleY="1.6"></GridLayout>
		<StackLayout id="loginButtonForm">
			<Button text="Login" id="showMainContent" tap="onTapLoginButton" />
		</StackLayout>
</GridLayout>

The background image appears and animates correctly but the login button doesn’t appear. I’m guessing it’s below the GridLayout with the background image. If I make the GridLayout with the background image as the outer wrapper, the login button is animated as well. Is it possible to do this?

Thanks,
Ross


#2

Here’s the code for that example: https://github.com/NativeScript/sample-Groceries/tree/master/app/login

It looks like the container positioning might be getting done in the css.