Confusing auto-add of padding when scrolling

#1

Principle Version: 5.9
macOS Version: High Sierra
Sketch Version: irrelevant (latest)

Hello, I’m working on a horizontally scrolling project. I got the h-scroll up and running (see gif), but now the vertical scroll has this extra white space that I can’t seem to account for, and sometimes I can’t v-scroll at all.
I have 2 screens that i’m h-scrolling between, and each one has a vertical scroll of it’s own. I’m really confused about which folders to make what vertical size and when to clip sublayers, etc. I have tried every possible combination of folder heights and i can’t seem to get each page to scroll vertically correctly.

In an ideal world, page 1 would scroll vertically, only to the pixels of artwork (no white space on top or bottom), then user would swipe to the next screen, it would scroll vertically back up to the top, and then they can scroll vertically on their own (without extra white space), and the swipe back.

I’ve simplified my project to just show this one issue with folders / clipping masks. Please help if you can!

And here’s a preview of how H-scroll is working but V-scroll got all messed up

0 Likes

#2

Here is a gif showing the white space that is just created from nowhere, and then the vertical scroll locks up.

0 Likes

#3

Ok, so many things are a bit messy in your file, I had to think about what was going on a lot, but I think I got it.

If you take the scroll driver to the original 0 position, you can see your group is way bigger than the viewport, so this may cause the scrolling to use more space than the actual screen size.

I’m not sure why you animated the scroll group’s Y position, this may be causing some trouble too. I removed all those keyframes.

Then, if the email subject is common to the 2 page states, I’d take it out of the scrolling area, or at least use only one for the 2 states of the conversation.

I’d also take out the ‘notes’ button as it seems to be floating over the scrolling content.

Then another change I’ve made is because your 2 pages have different height, when navigating to the second one, there’s too much white space in the bottom, to solve this, I’ve animated the NOTES CenterY position as I scroll down on the first page, that way, when I’m in the bottom of page 1, the page 2 is at its minimum Y value, the trick is that I used the amount of pixels I scroll down (461)

so I simply moved the ‘NOTES’ component the same amount (461) as you can see in the next screenshot

This hopefully will be similar to what you were trying?

Hope this helps!

0 Likes