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

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Sep 26 - Read on Facebook

hey, I have my first full day with framer and it's awesome so far. I was planning on using Cemre Güngör documentation of new ui.Draggable([view]); but I need to destroy the draggable somehow. is there a way to turn it off programmatically as well? (I need to switch between scroll and paginate)

13 Comments

Johannes Eckert

thanks — but the view is draggable as soon as I execute ui.Draggable([view]); — I am assigning handlers later and I can turn them off, but it's still draggable.

Cemre Güngör

Yes I noticed that so retracted the comment. Sorry :(

Cemre Güngör

I'd try ui.Draggable(null)

Cemre Güngör

It's helped me a lot to read framer source code

Johannes Eckert

hm, maybe I should look there. draggable(null) does not work either or I don't know how to assign it correctly.

Johannes Eckert

I am thinking of creating the scrollView effect on my own with a draggable — but I need to figure out the inertia effect. then I can choose freely between smooth scrolling and snapping

Cemre Güngör

The inertia effect and snapping is all in the source code, not quite ready though

Cemre Güngör

did you try something.dragger = null; ?

Cemre Güngör

Koen should just chime in :)

Koen Bok

Yeah I was mostly just playing around with this. My scroll view is just a draggable wrapped in a clipping view. On the dragEnd event I create an end animation based on the last velocity. So that kind of works and is nicely customizable.

I also made a version that snaps to the center of the closest visible view, so you can do an ios style snapping scroll view. Aaron built a very nice one too.

Now, the hardest part is to get a scrollview to work where the inertia bounces into the scrollframe, or where you flick it and it reaches the max/min height of the contents. It's doable, but hard to get right, that's why I haven't got around to it. Kudos to the person that can finish it, Joe Hewwit's project should help: http://joehewitt.github.io/scrollability/

Here are the examples I built, you can play with them and steal the source:
http://snappy-view.s3-website-us-east-1.amazonaws.com
http://snappy-view-inertia.s3-website-us-east-1.amazonaws.com
http://snappy-view-rubberband.s3-website-us-east-1.amazonaws.com
http://snappy-view-tabs.s3-website-us-east-1.amazonaws.com
http://snappy-view-zoom.s3-website-us-east-1.amazonaws.com

Koen Bok

Most of these by the way vary the end animation paramaters on the y-value of the drag position so you can see what feels right.

Koen Bok

And to answer the question above there is a Draggable.remove(view) function that should do what you want. This whole draggable thing has a horrible api that I should rethink and document.

Johannes Eckert

wow, Koen Bok! thanks for helping out. your examples are awesome and kind-of-the-exact-thing I needed. I would have tried to do it my own but wouldn't come up with that logic for sure :-)

Read the entire post on Facebook