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

What is Framer? Join the Community
Return to index
Rob Jones
Posted May 22 - Read on Facebook

I'm working through this great Draggable tutorial (https://medium.com/building-potluck/2e405d50b600).

It was written in Framer 2, and I'm trying to make it work in Framer 3. I have not been able to get the drag constrained to the Y axis with this:

cell.on(Events.DragMove, function() {
cell.y = 0
});

The syntax still looks correct for Framer 3 and the logic makes sense... ideas?

Thanks

12 Comments

Rob Jones

also, I used the updated syntax for making a layer draggable :

cell.draggable.enabled = true;

Tisho Georgiev

Take a look at the docs for Layer: http://framerjs.com/docs.html#layers. You can constrain dragging to a particular direction by changing the speed of the draggable. This will make something draggable along the horizontal only:

cell.draggable.speed.y = 0

Rob Jones

that worked! Also, the correct property:

cell.draggable.speedY = 0;

Koen Bok

Actually I changed this to:

cell.draggable.speedY

Koen Bok

Ha! Timing.

Koen Bok

It was more in line with the rest of the api.

Andreas Wahlström

Still, shouldn't rob's code work? Isn't that how it was done in framer 2?

Rob Jones

So the next weird thing. This code does what you expect (it animates the layer based on its x position), but *after* it does the correct animation, the animation starts over again but *super* slow!

cell.on(Events.DragEnd, function() {

if(cell.x < -200) {

// sufficiently dragged to snap action bar open

cell.animate({
properties: { x: -300 },
time: .5
});

} else {

// not dragged far enough, snap closed
cell.animate({
properties: { x: 0 },
time: .5
});

}

});

Tisho Georgiev

Rob, you do another DragEnd animation with time: 200 (which is 200 seconds, not milliseconds) on line 34. Did you forget to take it out?

Rob Jones

Tisho - duh. Yes, that code was from earlier in the tutorial, but it gets superceded with the code above. Removing that block fixes ... thanks :)

Cemre Güngör

Rob Jones hey all, i updated my blog post for framer 3

Read the entire post on Facebook