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

#1

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!!

0 Likes

Driver Keyframe for Component States
#2

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:

0 Likes

#3

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.

0 Likes

#4

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?

0 Likes

#5

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.

0 Likes

#6

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

1 Like