Parallax Background image like ios home screen motion based


Hi everyone,

What is the best way to implement a background image parallax animation based on motion like ios home screen. I prefer to use Javascript version of native script 2.5 or 3.0

Thank you.


Do you mean this or perhaps impliment something custom with the PAN gesture?


Hi steve,
Actually both of them makes animation based tap I want to animate the background with gyroscope sensor like the image below


I have just found the native (swift) way to do it but have no idea to do it with nativescript.


After some tries I have found to make it in nativescript.
Here is the code for do that. If anybody knows how to do it in android can help me.

if (page.ios) {
        applyMotionEffect(page.getViewById("background").ios, 30);
        applyMotionEffect(page.getViewById("logo").ios, -10);

function applyMotionEffect (view, magnitude) {
    var xMotion = new UIInterpolatingMotionEffect({
        keyPath: "center.x",
        type: UIInterpolatingMotionEffectType.TiltAlongHorizontalAxis
    xMotion.minimumRelativeValue = -magnitude;
    xMotion.maximumRelativeValue = magnitude;

    var yMotion = new UIInterpolatingMotionEffect({
        keyPath: "center.y",
        type: UIInterpolatingMotionEffectType.TiltAlongVerticalAxis
    yMotion.minimumRelativeValue = -magnitude;
    yMotion.maximumRelativeValue = magnitude;

    var group = new UIMotionEffectGroup();
    group.motionEffects = [xMotion, yMotion];



    <grid-layout id="background" ios:marginTop="-50" ios:marginBottom="-50" ios:marginLeft="-50" ios:marginRight="-50">
      <Image src="res://background.jpg"   strech="aspectFill"/>