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

What is Framer? Join the Community
Return to index
Blaine Billingsley
Posted Jul 08 - Read on Facebook

I am trying to make this horizontally dragging thing, and you can swipe up on items in the horizontal dragging thing to trigger another event. I am having a hard time figuring out how to get it to work without jankiness. Where I'm at now you have to like, try to swipe twice to get it to register sometimes. I can't figure out why. Any help doing this better? Ideally I'd like to lock the horizontal scrolling when swiping the page itself as well.

Thanks for any tips!

8 Comments

Koen Bok

You want to start by using directionLock on the nested ScrollComponents like in this example: http://framerjs.com/gallery/preview/#medium-app.framer

Blaine Billingsley

Jordan Robert Dobson I checked out your Inbox example and I still can't get mine to work nicely trying to reverse engineer it from there. Do you have any tips for the ol' Blainester?

Jordan Robert Dobson

Check out the ValioCon post I did. It's essentially the same thing you want.

Blaine Billingsley

Hm.... both of these examples don't seem to have an answer I can discover. It seems ScrollComponent in y'alls examples behave a little more friendly than just a draggable layer - that's the only real difference I can see. FWIW, it looks like sometimes the TouchStart event is triggered, but not the DragStart event. Other times (un-discernable as to when exactly) the DragStart is triggered.

Jordan Robert Dobson

You're over complicating it I think. DirectionLock on both and you're golden.

Jordan Robert Dobson

Dude... I think you're right. Something is weird here: Koen and Team should take a look:

http://share.framerjs.com/x1cjw8wl108x/

Blaine Billingsley

I'm so glad you said that... felt like I was going crazy. Interestingly, I was checking out your List-Seattle-FramerJS Inbox-esque example without updating and it was working great. After updating the file to the newest version of framer that jank is there in your prototype too. Seems to happen on non-ScrollComponent/PageComponent draggable layers.

Jordan Robert Dobson

Yep. That was the next step. Take that Medium example and blow it up 💥

Read the entire post on Facebook