This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Katie Wu
Posted Jul 23 - Read on Facebook

Say I have a page called "A" in a PageComponent, and I want another layer called "Cover" to sit on top of "A" and FOLLOW the position of "A," such what whenever page "A" is horizontally swiped to, you see "Cover." Then, when the user swipes UP on the "Cover," it goes away, and page "A" is revealed.

Should I make "Cover" a page in the PageComponent as well, with the same x,y position as "A" and try to handle events that way—or should I have "Cover" be a separate layer on top of the page content and then link their positions with Modulate (can you even do that)?

Thanks!

7 Comments

Katie Wu

all yellow screens are pages of the page component. the user starts out at "B," swipes right to "Cover," swipes up on the cover, and it reveals "A"

Louis-André Labadie

Making it a sublayer of A sounds like the way to go. By default, I believe layer overflow is visible, so the cover should slip away from page A without clipping.

Katie Wu

I've made Cover a sublayer of A, but how would I make the Cover swipe away without A also moving around underneath it?

Louis-André Labadie

You can try wrapping it with a scroll component, and giving it a bottom content inset that's the height of the page. This will give your cover enough "scroll room" to slide up completely.

http://framerjs.com/docs/#scroll.wrap
http://framerjs.com/docs/#scroll.contentInset

Katie Wu

another question: when I swipe between pages in a page component, how can I tell if the animation has ended? I've tried Events.ScrollAnimationDidEnd, Events.DragAnimationDidEnd, and Events.AnimationEnd, all of which don't respond...and thank you for your help! :)

Louis-André Labadie

I haven't used pages yet, but I would venture this means the animation events are happening on the parent, and not its pages? Total guess here.

Katie Wu

hmm ok thanks!

Read the entire post on Facebook