Snap.js

Snap.js copied to clipboard

Thanks for Snap.js

Snap is by and far good slide menu API, but it is not as smooth as native facebook/gmail app in my phone - HTC Sensation XE (Dual Core - Runs ICS).

When I start the swipe, it is responsive till say 50px horizontal (assume i am swiping 200 px horizontal with my finger), after the brief pause it then resumes smoothly.

I am using Demo app as base from where I have tuned to get my app. Is there anything that I could do. I will try to screen capture and upload to youtube.

Please share any tips to make the slide transition smooth.

Strangely the slide transition is smooth in JB devices(comparable with facebook/gmail) and even in devices with lower resolution and android versions, which makes me feel if my phone is an issue.

I am experiencing something similar. The menu button to slide in works extremely smooth. The close toggle I have enabled is also smooth. It is only the sliding events (aka. The drag of the finger) that seems to be a little bit slow or glitchy. Do we have any clues as to why this might be happening only for the touch slide events?

Does it have to do with the fact that there is a lot of content being translated?

No.. the content is simply empty

Can you have a look at

http://stackoverflow.com/questions/18637603/on-touching-uppermost-div-selects-contents-of-div-under-it-z-index-property?noredirect=1#comment27439097_18637603

The above question deals with content and snap-drawer-right divs.

When I touch the content div I see the contents of snap-drawer-right highlighted.

Ideally the snap-drawer-right behind the content div right ?

I have a screen shot attached in the question at stackoverflow.

Could you try to set "addBodyClasses: false" in the options and see if this might give you a performance boost during dragging? - sent via Hojoki

@jakiestfu @prud I tried making that change It fixed the performance issue - lesser flick !! THANKS A LOT - but not yet.

It resulted in another issue - I have both left and right swipe activated - I see the right side superimposed over the left now :(

Should somebody please help me there.

Can you have a look at the stackoverflow question in my previous post.. I have mentioned another problem. The touch I make in the "content" div is selecting/touching the content in "snap-drawer-right"/"snap-drawer-left" div.

This must be some CSS fix or something..

like say..

1. make both the div invisible when the content in focus
2. make the only visible div - either right/left be visible at a time - when one side is swiped. ??

@jakiestfu @prud

I have found TWO MAJOR REASONS

1. When I trigger the snapper.on('drag', ), the slider starts to flicker. Every pixel moved is triggering the snapper.on('drag') function and cpu goes sluggish. Causing the flick.
2. When there is nothing in the content div - since dragger-left and dragger-right are one over the other, the contents of the dragger-left/dragger-right are highlighted - the slide function get triggered only after the highlight.

Can you help me with if i could slide the left/right content out instead of superpose the content div over the left/right drawer ?

PLEASE HELP

@takrishna @prud

I have a ton of things planned for 2.0 of Snap.js and it will be great. Performance boosts, different slide modes (push, over, and more). I think the first point you mentioned is a great imporovement. Could you please elaborate on point #2?

@jakiestfu any ETA on that? I could actually do with just the performance boosts and keep the slide modes for later, hehe ;)

@jakiestfu For understanding, if you set all the divs with translucent background. you can see through the content div to view the snap-drawer-left/snap-drawer-right divs. When there is nothing in the content div or ther are empty areas and you simply swipe down the content div, I see the contents of the snap-drawer-left/snap-drawer-right div getting scrolled. Ideally no content of snap-drawer-left/snap-drawer-right should scroll when i swipe/when i am in content div right ?

This could very well be a feature of webkit/chrome engine on mobile phones. When i scroll using mouse on desktops there is no scroll. This however is very apparent in mobile phones. I have tested in Sensation XE, Samsung Phones.

This is how the div screen shots would look after getting the divs to translucent

@takrishna Correct, there is a scroll where there shouldn't be. I do not know why this happens, but further testing could be relevant to this topic to determine whether this is a Snap.js layout bug or a webkit rendering issue.

Well, if we keep the layers behind the content div invisible/display:none, I think it should solve the issue ?? So the script must be tweaked such that the divs are NOT STACKED one over other. except when in left/right open states.. ie When only content is displayed the other two divs must be display:none/invisible.

Regards,

Krishna

On Mon, Sep 23, 2013 at 10:12 PM, Jacob Kelley [email protected]:

@takrishna https://github.com/takrishna Correct, there is a scroll where there shouldn't be. I do not know why this happens, but further testing could be relevant to this topic to determine whether this is a Snap.js layout bug or a webkit rendering issue.

— Reply to this email directly or view it on GitHubhttps://github.com/jakiestfu/Snap.js/issues/115#issuecomment-24934087 .

@takrishna I just coded up what will eventually be called "layers". It makes it simple to select the content to be displayed. Instead if stacking like you said, it uses display block/none. It increases performance as well

great.. my email is [email protected].. :) can you send me the entire project ? I will test it.. i have myself done some tweaking in the draggy side transistion (point 1 above) I think i can try to integrate both of them and we can have a good performing script.

Regards,

Krishna

On Tue, Sep 24, 2013 at 12:14 PM, Jacob Kelley [email protected]:

@takrishna https://github.com/takrishna I just coded up what will eventually be called "layers". It makes it simple to select the content to be displayed. Instead if stacking like you said, it uses display block/none. It increases performance as well

— Reply to this email directly or view it on GitHubhttps://github.com/jakiestfu/Snap.js/issues/115#issuecomment-24978137 .

@jakiestfu Can you please share the file with the changes you have made

Hi, is there any workaround to this? I am facing the same thing. When the content is empty, the swipe is smooth. But, it lags when there's any content. Using 'addBodyClasses:false' stacks over the right drawer's content next to the left drawer's although it does fix the lag.

Try to implement Momentum Scrolling on iOS Overflow Elements

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

and also translate3d declaration

http://stackoverflow.com/questions/6481894/proper-way-to-optimize-css-3-animations-for-ios-mobile-safari