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

What is Framer? Join the Community
Return to index
Win Lin
Posted Oct 06 - Read on Facebook

Hi guys! Super new to Framer but I had a quick question - is it possible to control the drag of one layer while swiping/dragging in another layer? Ex. I want Layer A to be full screen of my device and when I drag/swipe in it, I want it to control Layer B, a small circle above/within the constraints of layer A. Hope that makes sense.

18 Comments

Andrew Nalband

Hi Win, welcome! It's really helpful if you can post your project with this kind of question. It's hard to know exactly what you are trying to achieve, but you can animate Layer B based on events with something like:

layerA.on Events.Scroll, ->

or

layerA.on Events.Drag, ->

Andreas Mitschke

It's what Andrew said, you fire a move function in a drag function from the fullscreen layer.

Win Lin

Thank you guys! Will try it out and if it doesn't work I'll post what I have going on for more analysis.

Win Lin

Alrighty, I'm back after not being able to solve it (sorry I'm a total JS noob)! I have a couple of questions - 1) on mirror in frameless iOS, the layer 'button' is not showing up for some reason. 2) I can't get the drag/move events working properly. I would like whenever I drag on layer 'constraints' to move 'circle' in the way that it is movable right now (except control it completely through dragging on the 'constraints' layer vs dragging 'circle'). 3) When tapping on 'button' the event + animation is firing off but the origin is not being set to the center for some reason. Any help would be great, code pasted below:# Set background
bg = new BackgroundLayer
backgroundColor: "#1c1c1c"

# Layers
constraints = new Layer
width: 724
height: 1300
backgroundColor: "#333333"

circle = new Layer
width: 80
height: 80
backgroundColor: "#fff"
borderRadius: 100

button = new Layer
x: 150
y: 1200
width: 424
height: 100
backgroundColor: "yellow"

# Layer indexes
circle.index = 2
button.index = 3

# Center layers
constraints.center()
circle.centerX()
circle.centerY()

# Layer dragging options
circle.draggable.enabled = true
circle.draggable.constraints = constraints.frame
circle.draggable.bounce = false
circle.draggable.speedX = 0.125
circle.draggable.speedY = 0.125

flash = new Animation
layer: circle
properties:
originX: 0.5
originY: 0.5
width: 200
height: 200
curve: "spring"

flashR = flash.reverse()

# Alternate between the two animations
flash.on(Events.AnimationEnd, flashR.start)
flashR.on(Events.AnimationEnd, flash.start)

button.on Events.Click, ->
flash.start()

constraints.on Events.DragStart, ->
circle.on Events.Move, ->
circle.draggable.enabled = true
circle.draggable.constraints = constraints.frame
circle.draggable.bounce = false
circle.draggable.speedX = 0.125
circle.draggable.speedY = 0.125

Andrew Nalband

Hey Win Lin - did you know if you click the share button it will create an online link to your prototype where anyone can play with the interaction and download the project?

Andrew Nalband

Do you want to physically drag around the constraints layer (have it move around?) or do you want to just click and drag your cursor on the constraints layer while it stays still?

Andrew Nalband

what are you trying to achieve here?

circle.on Events.Move, ->
circle.draggable.enabled = true
circle.draggable.constraints = constraints.frame
circle.draggable.bounce = false
circle.draggable.speedX = 0.125
circle.draggable.speedY = 0.125

Andrew Nalband

To achieve the effect you want on the circle, I'd use scale instead of animating the width and height. Is this what you're looking for? I've also altered the way dragging a touch along the constraints layer drags the circle - keep in mind with will behave a little differently on mobile than in the browser http://share.framerjs.com/kmfyoj7zqazf/

Andrew Nalband

Keep in mind that Framer is in Coffeescript and not JS - http://coffeescript.org/ - Coffeescript compiles into JS, but it's not a superset of the language, so you can't write JS in Coffeestript

Win Lin

hey andrew, thanks for the answers. to clarify the dragging interaction - i want to be able to swipe around the entire screen to move the circle, in the way that you can drag/swipe on the circle currently to move it around within the constraint, i'd just like to control it over the entire screen versus just the circle

Andrew Nalband

Win Lin - ok - like this? http://share.framerjs.com/kmfyoj7zqazf/

Win Lin

not exactly, this is controlling the circle on mousemovement/hover versus dragging anywhere in the constraint (unless it isnt working properly for me)

Andrew Nalband

Yeah, I don't really know why framer does this on the desktop, but try it on a real phone and it should have the behavior you want. Also, you could create a boolean and update it to true and false like this: http://share.framerjs.com/3qot9njger0b/ What's your goal? Try out framer? Prototype a game?

Win Lin

hmm, im getting nothing working on the phone (ios frameless), layers are there but nothing is working. goal is both trying out framer and trying to prototype some small things

Andrew Nalband

Honestly, I've personally had better results just using links from framer in my browser and adding them to the homescreen than using Frameless or Frames on iOS. Yeah, if you want to use this interaction on mobile you have to call a touch event a little differently: http://share.framerjs.com/wes9qbvm1gb0/

Win Lin

this is getting pretty close, one issue is that the circle appears where my tap is, where i just want to control it from where it is by dragging anywhere on screen, and then all it needs are the speed changes and physics applied to it.

Andrew Nalband

Well I can't solve ALL your problems for you or you'll never learn! ;)

Win Lin

haha, definitely! ill play around with this some more

Read the entire post on Facebook