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

What is Framer? Join the Community
Return to index
Asher Isaac Simonds
Posted Jul 26 - Read on Facebook

Hello folks!

Wacky draggable question -

A few fellow teammates and I are working on a draggable element for a hackathon and are wondering about how we might build it. Hopefully I can clearly break down our scenario:

We have a center point that is dragged around the screen like normal. We also have a larger element that is linked to it displaying screen information. The trick - we'd like to have that element drag around with this element as though it was attached like a trailer. Image attached for visual explanation.

Is this a feasible interaction for Framer to handle, or are we stuck animating it in After Effects?



Katie Wu

If you want B to be at the same relative position to A, you can y do this by letting A listen for Events.Move and update B's position accordingly. But if you want B to "whip" around A like a ball attached by a string (physics emulating) then I'm not quite sure, although you might be able to do it by detecting the drag velocity

Chris Camargo

Circular interactions with Framer. I'd love to see more examples of this in working code.

Jordan Robert Dobson

Chris ask me to see some of my private work some day.

Asher Isaac Simonds

Katie Wu You wouldn't be able to "whip" the B element around A - it'd interact more like a tugboat pulling a large ship. Moving A around would turn B on its own center point. But you get the idea.

Raphaël de Courville

This Processing example does pretty much what you describe:

Javier Díaz

I'm doing this by heart in the FB comments, but should work.

Basically,Its a matter of constraining the distance between the elements on drag. Let's call this orbit distance fixedDistance.

More or less. OnDrag you'd have to get the angle between the position of the drag event in A (the event x and y) and the center of B (B.x and B.y), there's a formula using Math.atan2 for this. Let's call this angle tapAngle

Then you apply this:
A.x = B.x + fixedDistance * Math.cos(tapAngle)
A.y = B.y + fixedDistance * Math.sin(tapAngle)

The angles will be in radians.

Javier Díaz

Oh, and taking in account you have a "system" in place and probably A will be a child of B. You have to be careful with relative vs. Absolute coordinates for the events.

Javier Díaz

Now I realize you were maybe not asking about dragging one element around the other, but the B element dragging around when you drag A?

If it's like this I'll update when I arrive home.

Asher Isaac Simonds

Raphaël de Courville's link is basically the interaction we're trying to create.

Ezzat Chamudi
Read the entire post on Facebook