Skip to content

Instantly share code, notes, and snippets.

@NiklasJordan
Last active October 22, 2015 16:20
Show Gist options
  • Save NiklasJordan/03dd6c4222250d5f65a9 to your computer and use it in GitHub Desktop.
Save NiklasJordan/03dd6c4222250d5f65a9 to your computer and use it in GitHub Desktop.
FramerJS Pager
# Set background
bg = new BackgroundLayer
backgroundColor: "#e67e22"
#####################
### Create Layers ###
#####################
layerA = new Layer
width: 130
height: 130
y: 130
backgroundColor: "#fff"
borderRadius: 10
rotation: 45
color: "#000"
layerB = new Layer
width: 300
height: 84
image:"images/header.jpg"
layerC = new Layer
width: 130
height: 130
y: 180
layerC.html = "4"
layerC.style = {
"color": "#000"
"background": "none"
"text-align": "center"
"font-size": "40px"
"font-family": "Georgia, serif"
}
layerD = new Layer
width: 6
height: 11
image:"images/pfeil.jpg"
y: 190
layerE = new Layer
width: 6
height: 11
image:"images/pfeil.jpg"
y: 190
layerF = new Layer
width: 50
height: 50
y: 170
style: "background": "none"
layerG = new Layer
width: 50
height: 50
y: 170
style: "background": "none"
layerH = new Layer
width: 130
height: 130
y: 280
opacity: 0
layerH.html = "3"
layerH.style = {
"color": "#000"
"background": "none"
"text-align": "center"
"font-size": "40px"
"font-family": "Georgia, serif"
}
######################
### Layer Position ###
######################
layerA.centerX()
layerB.centerX()
layerC.centerX()
layerD.centerX(-70)
layerE.centerX(+70)
layerE.rotationY = 180
layerF.centerX(+70)
layerG.centerX(-70)
layerH.centerX()
########################
### Animation Number ###
########################
animationE = new Animation
layer: layerC
properties:
y: 80
opacity: 0
curve: "spring(200,15,0)"
time: 0.2
animationF = new Animation
layer: layerH
properties:
y: 180
opacity: 1
curve: "spring(200,15,0)"
time: 0.2
animationG = new Animation
layer: layerC
properties:
y: 180
opacity: 1
curve: "spring(200,15,0)"
time: 0.2
animationH = new Animation
layer: layerH
properties:
y: 280
opacity: 0
curve: "spring(200,15,0)"
time: 0.2
##########################
### Animation to right ###
##########################
animationA = new Animation
layer: layerE
properties:
opacity: 0
curve: "bezier-curve(0.25, 0.1, 0.25, 1)"
time: 0.3
animationI = new Animation
layer: layerD
properties:
opacity: 0
curve: "bezier-curve(0.25, 0.1, 0.25, 1)"
time: 0.3
animationB = animationA.reverse()
animationB.delay = 0.2
animationM = animationI.reverse()
animationM.delay = 0.2
layerF.on Events.Click, ->
animationA.start()
animationI.start()
animationG.start()
animationH.start()
layerA.animate
properties:
rotation: layerA.rotation + 90
curve: "spring(200,15,0)"
delay:0.1
time: 0.4
animationA.on(Events.AnimationEnd, animationB.start)
animationI.on(Events.AnimationEnd, animationM.start)
#########################
### Animation to left ###
#########################
animationC = new Animation
layer: layerD
properties:
opacity: 0
curve: "bezier-curve(0.25, 0.1, 0.25, 1)"
time: 0.3
animationJ = new Animation
layer: layerE
properties:
opacity: 0
curve: "bezier-curve(0.25, 0.1, 0.25, 1)"
time: 0.3
animationD = animationC.reverse()
animationD.delay = 0.2
animationL = animationJ.reverse()
animationL.delay = 0.2
layerG.on Events.Click, ->
animationC.start()
animationJ.start()
animationE.start()
animationF.start()
layerA.animate
properties:
rotation: layerA.rotation - 90
curve: "spring(200,15,0)"
delay:0.1
time: 0.4
animationC.on(Events.AnimationEnd, animationD.start)
animationJ.on(Events.AnimationEnd, animationL.start)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment