Not sure how to animate a swipe up / swipe down interaction. Please help!

iosguy · October 21, 2019, 10:46pm

Hi all! I’m aiming for a swipe up or swipe down interaction that lets the user drag the full screen. The swipe up is essentially an upvote, and the swipe down is a downvote. After swiping, ideally the screen would “snap back” to its original position and I would be able to trigger other interactions.

I’ve been unsuccessful in coming up with the basic Principle approach that would make this work.

Here is a simple scrollable content area with a Driver for the color under the content, but I can’t trigger anything and the content doesn’t “snap” back after the swipe:

Any thoughts would be super helpful!!

iosguy · October 21, 2019, 10:53pm

I also tried a Paged layer approach which gives me a more traditional “snap back” feel - but again it’s not connected to another action and I don’t know how to tell Principle the swipe is actually completed:

shonen · October 22, 2019, 11:21am

The page is essentially another scroll behavior, so you can user ScrollEnds to trigger the transition to another artboard.

You’d need to be in control as Principle wouldn’t know if you were swiping up or down.

iosguy · October 22, 2019, 2:36pm

I see, thanks shonen. Is there anyway to “fake” the scroll up and down using the same Page elements? Or will it only work one way (up or down) per screen?

shonen · October 22, 2019, 3:53pm

I don’t think so, with faking it I mean, that you need to know when you can swipe up or down depending on what screen are you at the moment.

ftillaev · November 4, 2019, 9:08pm

See if this is helpful - You can try using the Scroll on the front card, and drivers to modify various elements behind the card

Aldous · November 25, 2019, 4:18pm

A simple way to “hack” this is…

Artboard 1: just define a swiping area (an invisible rectangle should work) and set the action to navigate to the next screen to “touch end”

Artboard 2: should be the revealed area fully expanded. Set the action to the next screen (for the whole artboard) to “auto”

Artboard 3: the revealed area collapsed.

Not perfect, but the touch end on artboard 1 would give you a reveal effect, then you could define how long the 2nd artboard transitions to the 3rd (the revealed area hiding again). You can repeat this for both top and bottom interactions with two invisible “swipe area” rectangles (one top, one bottom).