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

What is Framer? Join the Community
Return to index
Che Harvey
Posted Nov 18 - Read on Facebook

I hate to water down the great recent posts with such a basic issue, but I'm taking a tutorial and learning about EdgeSwipe. I literally copied the code from the docs, but I cant seem to recognize the EdgeSwipe. Is this just me?

3 Comments

Joshua Tucker

Hey Che! You're not watering down this group at all! This is what the group is for, always feel free to jump in and ask questions.

1) In your GIF, you're swiping from left to right, which means you're swiping right. That would be "onEdgeSwipeRight" not "onEdgeSwipeLeft".
2) There are two reasons edgeSwipe is not optimal for desktop prototypes:

First, the reason why edgeSwipe works really well on mobile is because it adds a touchmove listener. This in turn creates the edgeSwipe event only if the touch coordinate originates from 0 (x and y). Your finger has way more surface area so it immediately recognizes it when you're actually swiping on a mobile device. You can imagine that originating from exactly zero using a mouse is problematic, hence why it's really tricky to get it to work in Framer Studio. You can do it, but it takes a lot of tryin' and there's really no skill to it - it's just straight up difficult :).

Second, the screen and device are actually separate layers. I included a screenshot to illustrate. Screen is the grey layer inside the device frame. However, the device frame is actually a separate layer; Framer.Device.phone. EdgeSwipe events are only fired on the Screen layer so if you originate on the device frame itself, it won't fire. The only time, in theory, this wouldn't happen is if you use Canvas as the device, which makes the Screen and the device layer the exact same size. However, you run into the same problem there with not originating the touch point at 0 because the code viewer (frame that the layers are rendered) doesn't listen for touch events.

An alternative? You could add a swipe event to the device layer (Framer.Device.phone) itself. Unfortunately, using edgeSwipe on the device layer has the same problem; originating at 0. In order to truly achieve a simulated edgeSwipe using just a swipe event on the device layer, you would need to calculate when your touch event coordinate actually reaches the screen. This would imply that you know the size difference between the device layer and the screen, which you can do because they both have a .width, .height, or .size property. Unfortunately, this only works if the distances on all sides was something you knew. Not all devices have the same margin from top to bottom, or left to right because some devices (like the iPhone) have a shadow on the bottom, as an example.

Koen Bok? :)

Che Harvey

Joshua Tucker thanks for such a thoughtful and detailed reply (and for your encouragement to post to the group). I suppose this is really just a tool to show what kind of animations are in our head.

Would good way to create more surface area be to just create a narrow layer on the right and use layer.onSwipeRight and layer.onSwipeRightEnd?

Read the entire post on Facebook