 page.section SECTIONS.ABOUT, (section) ->
   transitions = []
 
+  section.on "scrollOut", ()->
+
   section.on "scrollIn", ()->
     setMenuActiveItem(0)
 
   section.on "progress", (percent)->
     from = screenHeight
     to = screenHeight / 2
-    aboutBG.y((to - from) / 100 * percent + from)
+    if percent <= 100
+      aboutBG.y((to - from) / 100 * percent + from)
 
   transitions.push {
     target: $aboutDescription[0]
     start: 0
     end: 100
-    key: 'top'
-    from: screenHeight + 20
-    to: screenHeight / 2 + 20
-    format: "%spx"
+    key: 'transform'
+    from: screenHeight - 60
+    to: screenHeight / 2 -60
+    format: "translateY(%spx)"
   }
 
   section.transitions(transitions)

aboutSVG = SVG("about-svg")
sitconJiang = aboutSVG.image("images/sitcon_jiang.png", 584, 687).move(screenWidth * 0.9 - sitconJiangWidth, calcSITCONJiangTop())
aboutBG = aboutSVG.polygon("0,0 #{screenWidth * 0.75},0 #{screenWidth * 0.65},#{aboutDescriptionHeight * 1.2} 0,#{aboutDescriptionHeight * 1.2}").fill(primaryColor)
sitconJiangLine = aboutSVG.image("images/sitcon_jiang_line.png", 584, 687).move(screenWidth * 0.9 - sitconJiangWidth, calcSITCONJiangTop())

$window.on "resize", ()->

    target: sitconJiangAtMap
    start: 0
    end: 100
    key: 'transform'
    from: -screenHeight + 350
    to: 0
    format: "translateY(%spx)"
  }

  section.transitions(transitions)
