Navbar parallax effect on Android about fluster-app HOT 3 CLOSED

Just FYI: the mutation observer shenanigans I use is no longer required. In the version of Ionic I used for the tutorial you had to wait for the ion-scroll element to be added and then listen for scroll events on that, but now you can just listen for scroll events directly on ion-content.

from fluster-app.

@joshuamorony thx 👍 I use a listener in my directive (@HostListener('ionScroll', ['$event'])), I should check if that works the same, I guess so, it works fine on iOS

also I'm interested to try how you manipulate the css (initStyles()/hide()/show()) which might be smoother than manipulating only webkitTransform

Hopefully one of these will allow me to unleash the effect on Android too...

from fluster-app.

@joshuamorony look like we are actually a complementary team ;)

the way I implemented my parallax effect was good on iOS but glitchy on Android. yours is the contrary, works like a charm on Android but turned out (didn't analyzed it much) to be glitchy when I tested it on my real iPhone 6s/iOS 12

so I just decided to handle both cases in a single directive, thx a lot for the tutorial which allowed me to unleash the effect on Android too 👍

btw. regarding the tutorial, just in case, I had to do the following improvements:

• I removed the modification of the opacity because there is a box-shadow on the parent element (ion-header) on Android which gonna remains sharp while scrolling and hiding the toolbar

• The toolbar height might not be 44px, per default I think it's 56px now on Android, therefore I read and apply the actual value with a variable in the directive

• I only apply the "transition" styles once

• And finally the most important, before anything, the toolbar height should be actually added as attribute "height" to the toolbar otherwise the very first time we will scroll and trigger the parallax effect, there would be not transition on the height aka the height would be directly set to 0px without any transition

all together the directive looks like the following: https://github.com/fluster/fluster-app/blob/master/src/app/directives/core/navbar/navbar-on-scroll.directive.ts

from fluster-app.