Animating sidemenu (horizontal parallax scrolling)

ionic-v1
1

What about a bit of an upgrade to the sidemenu animation, like this one: http://onsenui.io/guide/components.html#sliding-menu

Did anyone experiment with this?

2

Just need a little css and directive to get that set up.

.directive('animatedMenu', function ($timeout, $ionicSideMenuDelegate) {
    return {
        restrict: 'A',
        replace: false,
        link: function ($scope, $element, $attr) {
            // Run in the next scope digest
            $timeout(function () {
                // Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is

                $scope.$watch(function () {
                        return $ionicSideMenuDelegate.getOpenRatio();
                    },
                    function (ratio) {
                       $element[0].style.webkitTransform = "translateX(" + (Number(ratio) * 100) + "px)";
                    });
            });
        }
    }
});
2 Likes
3

Thanks @mhartington - this pointed me to the right direction. Things I discovered while playing around with it:

  • While dragging the content to the left, the animation stutters on an iPhone 4s.
  • There’s also a slight delay for the menu to pickup the changes.

Since I have to set drag-content to false for other reasons, this doesn’t interfere much with my use case as there will only be 2 states: fully open and fully closed.

I used a slightly modified approach in the end without $watching for changes on the delegate object and simply applying a CSS transform/transition:

.menu.menu-left {
  opacity: 0;
  -webkit-transform: translate3d(-30px,0,0);
  transform: translate3d(-30px,0,0);
  transition: -webkit-transform $menu-animation-speed ease, opacity $menu-animation-speed ease;
  transition: transform $menu-animation-speed ease, opacity $menu-animation-speed ease;
}
.menu-open .menu.menu-left {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
1 Like
4

Playing around with this further, I discovered that a CSS-only solution poses a couple of problems. The timing of the animation does not correspond 100% with the timing of the class being added or removed from the body tag. Depending on what kind of content is loaded in the pane, the 2 animations can be off by a few milliseconds.

So, simply trusting “menu-open” on the body tag isn’t gonna be a bulletproof solution. $ionicSideMenuDelegate offers a couple of methods to get the status of a side menu container (isOpenLeft() etc).

I have to dig into the source code of the side menu a bit more, but it seems to me that it would be best to have both animations depend on the body class “menu-open”, without injecting inline styles at all. This way, one can make sure that both animations fire at the same time.

My gut tells me that this would make the side menu more responsive in general, as the animation does not depend on an angular directive at all.

My goal is to avoid a $watch for a simple thing such as this altogether and go 100% CSS-only.

5

Hey Olivier,

Have you dig into a new solution ?

6

Hi,
I’m a newbie in ionic and it is very cool!
I would like to realize an effect like this


I tried the code above and it works quite well if I swipe fast, but if I swipe slow then the page content trembles.
It seems like there is a conflict between the standard SideMenu open swipe and the new directives.

Have any ideas?

thank you in advance