diff --git a/_src/_assets/javascripts/page-about.js b/_src/_assets/javascripts/page-about.js
index be78464..d10fa3e 100644
--- a/_src/_assets/javascripts/page-about.js
+++ b/_src/_assets/javascripts/page-about.js
@@ -6,13 +6,60 @@ document.addEventListener('DOMContentLoaded', function() {
trigger.addEventListener('click', function(e) {
for (var i = 0; i < bio.length; ++i) {
var item = bio[i]
+
if (item.style.display == 'block') {
item.style.display = 'none'
trigger.innerHTML = '+Show bios'
+ hide(item)
} else {
item.style.display = 'block'
trigger.innerHTML = '−Hide bios'
+ show(item)
}
}
})
})
+
+function show(ele) {
+ raf = window.requestAnimationFrame(function() {
+ var opacity = 0
+ var height = 0
+
+ function increase () {
+ opacity += 0.1
+ height += 1
+ if (opacity >= 1) {
+ // complete
+ ele.style.opacity = 1
+ ele.style.height = '100%'
+ return true
+ }
+ ele.style.opacity = opacity
+ ele.style.height = height + '%'
+
+ requestAnimationFrame(increase)
+ }
+ increase()
+ });
+}
+
+function hide(ele) {
+ raf = window.requestAnimationFrame(function() {
+ var opacity = 1
+ var height = '100%'
+ function decrease () {
+ opacity += 0.1
+ height += 1
+ if (opacity >= 1) {
+ // complete
+ ele.style.opacity = 0
+ ele.style.height = 0
+ return true
+ }
+ ele.style.opacity = opacity
+ ele.style.height = height + '%'
+ requestAnimationFrame(decrease)
+ }
+ decrease()
+ })
+}
diff --git a/_src/_assets/styles/bigchain/_team.scss b/_src/_assets/styles/bigchain/_team.scss
index 2b4f27b..17ebb85 100644
--- a/_src/_assets/styles/bigchain/_team.scss
+++ b/_src/_assets/styles/bigchain/_team.scss
@@ -69,6 +69,13 @@
margin-bottom: 0;
margin-top: $spacer;
display: none;
+ opacity: 0;
+ height: 0;
+ transition: .4s ease-out;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
}
.team__bio__trigger {