Why does not LayerA and LayerB make animation when it end Drag in Framerjs, with code:
I create layerA
, layerB
and layerC
, then I drag LayerC
.
In Event DragMove
, I change LayerA
and LayerB
's props with LayerC
's offset, and I always want to make a animation when it EndDrag
, but it doesn't work.
Do someone knows why?
# Create layer
layerA = new Layer
x: 50
y: 200
scale: 0.8
width: 550
height: 600
opacity: 0.6
borderRadius: 8
backgroundColor: "#ffffff"
layerB = new Layer
x: 50
y: 250
scale: 0.9
opacity: 0.8
width: 550
height: 600
borderRadius: 8
backgroundColor: "#ffffff"
layerC = new Layer
x: 50
y: 300
scale: 1
width: 550
height: 600
borderRadius: 8
backgroundColor: "#ffffff"
layerC.draggable.enabled = true
layerC.draggable.horizontal = false
layerC.draggable.constraints =
x: 50
y: 300
width: 550
height: 600
layerC.on Events.DragMove, ->
print layerC.draggable.constraintsOffset
layerA.opacity = 0.6 + 0.2 * layerC.draggable.constraintsOffset.y / 360
layerA.scale = 0.8 + 0.1 * layerC.draggable.constraintsOffset.y / 360
layerA.y = 200 + 50 * layerC.draggable.constraintsOffset.y / 360
layerB.opacity = 0.8 + 0.2 * layerC.draggable.constraintsOffset.y / 360
layerB.scale = 0.9 + 0.1 * layerC.draggable.constraintsOffset.y / 360
layerB.y = 250 + 50 * layerC.draggable.constraintsOffset.y / 360
layerC.on Events.DragEnd, ->
print layerC.draggable.constraintsOffset
if layerC.draggable.constraintsOffset.y < 360
layerC.animate
properties:
opacity: 1
scale: 1
y: 300
curve: "ease"
time: 0.4
layerA.animate
properties:
opacity: 0.6
scale: 0.8
y: 200
curve: "ease"
time: 0.4
layerB.animate
properties:
opacity: 0.8
scale: 0.9
y: 250
curve: "ease"
time: 0.4
I am new to framer please make a help
your mistake was nothing in your thinking, you just forgot to intend the CoffeScript code for layerA's
and layerB's
animations properly. This is the working example I think:
http://share.framerjs.com/2mp2alhvueq4/
Regards from Germany, Dennis
PS: The best way to ask questions according FramerJS / Framer Studio is our dedicated Facebook-Group.