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

What is Framer? Join the Community
Return to index
Ola Laurin
Posted Sep 17 - Read on Facebook

Does anyone have an idea of how to recreate this demo in Framer: http://www.kirupa.com/snippets/move_element_to_click_position.htm

I guess I'm asking there's a way to use offsetLeft, scrollLeft and clientLeft in Framer.

7 Comments

Andreas Wahlström

Haven't read the tutorial but from looking at the example you should be able to use circle's midX property and animate to event.offsetX. Then do the same for Y

Irwansyah

Just animate the midX and midY:

containerLayer = new Layer
width: Screen.width
height: Screen.height
backgroundColor: "white"

l = new Layer
width: 100
height: 100
borderRadius: 100/2
backgroundColor: "brown"

l.center()

containerLayer.on Events.Click, (e)->
console.log e

l.animate
properties:
midX: e.clientX
midY: e.clientY

Jonas Treub

Inspired by Linda Dong I created the following example: http://share.framerjs.com/y3rqzq97ctyb/

Ola Laurin

Thanks! It doesn't work with touch though. If it's a touch enabled device I should use pageX else it's offsetX, like in your example. Need a good way to sniff out whether the user is using touch enabled device or a mouse now. Hmm :)

Ola Laurin
Ola Laurin

http://share.framerjs.com/ra9aa4q083pf/

Now it works with both touch and mouse.

Jordan Robert Dobson

Here's a module I posted that helps solve this: https://www.facebook.com/groups/framerjs/permalink/721917614601979/

Read the entire post on Facebook