FramerJS Pager

framerjs_pager.js

# 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)