Index: arms/css/index2.css
===================================================================
diff -u
--- arms/css/index2.css	(revision 0)
+++ arms/css/index2.css	(revision 7e9f8031810508f9aebd79d8c838e268a1982051)
@@ -0,0 +1,165 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
+* {
+    box-sizing: border-box;
+    user-select: none;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    color: white;
+    background: black;
+    font-family: 'Cormorant Garamond', serif;
+    text-transform: uppercase;
+}
+
+h2 {
+    font-size: clamp(1rem, 5vw, 5rem);
+    font-weight: 400;
+    text-align: center;
+    letter-spacing: 0.5em;
+    margin-right: -0.5em;
+    color: #cccccc;
+    width: 90vw;
+    max-width: 1200px;
+}
+
+header {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5%;
+    width: 100%;
+    z-index: 3;
+    height: 7em;
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: clamp(0.66rem, 2vw, 1rem);
+    letter-spacing: 0.5em;
+}
+
+section {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    position: fixed;
+    visibility: hidden;
+}
+section .outer,
+section .inner {
+    width: 100%;
+    height: 100%;
+    overflow-y: hidden;
+}
+section .bg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    background-size: cover;
+    background-position: center;
+}
+section .bg h2 {
+    z-index: 2;
+}
+section .bg .clip-text {
+    overflow: hidden;
+}
+
+.first .bg {
+    background-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.6) 0%,
+            rgba(0, 0, 0, 0.3) 100%
+    ),
+    url(https://images.unsplash.com/photo-1617478755490-e21232a5eeaf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU1NjM5NA&ixlib=rb-1.2.1&q=75&w=1920);
+}
+
+.second .bg {
+    background-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.6) 0%,
+            rgba(0, 0, 0, 0.3) 100%
+    ),
+    url('https://images.unsplash.com/photo-1617128734662-66da6c1d3505?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzc3NTM3MA&ixlib=rb-1.2.1&q=75&w=1920');
+}
+
+.third .bg {
+    background-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.6) 0%,
+            rgba(0, 0, 0, 0.3) 100%
+    ),
+    url(https://images.unsplash.com/photo-1617438817509-70e91ad264a5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDk4Mg&ixlib=rb-1.2.1&q=75&w=1920);
+}
+
+.fourth .bg {
+    background-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.6) 0%,
+            rgba(0, 0, 0, 0.3) 100%
+    ),
+    url(https://images.unsplash.com/photo-1617412327653-c29093585207?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDgzMQ&ixlib=rb-1.2.1&q=75&w=1920);
+}
+
+.fifth .bg {
+    background-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.6) 0%,
+            rgba(0, 0, 0, 0.3) 100%
+    ),
+    url('https://images.unsplash.com/photo-1617141636403-f511e2d5dc17?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODAzMjc4Mw&ixlib=rb-1.2.1&q=75w=1920');
+    background-position: 50% 45%;
+}
+
+h2 * {
+    will-change: transform;
+}
+
+.section-scroll-dots-navigation {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 50%;
+    right: 30px;
+    background-color: rgba(51, 51, 51, 0.5);
+    border-radius: 35px;
+    padding: 0.6rem;
+    z-index: 10;
+    transform: translate3d(0, -50%, 0);
+}
+
+.list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+
+.section-scroll-dots-navigation > ul {
+    margin: 0.5rem 0;
+}
+
+.list.list-unstyled {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.btn {
+    border: none;
+    padding: 5px;
+    border-radius: 50%;
+    background-color: rgba(51, 51, 51, 0.5);
+}
+
+.list li.active > .btn {
+    background-color: rgba(229, 96, 59, 0.5);
+}
Index: arms/detail.html
===================================================================
diff -u -r690aa9335c0406e42be0044d26a9f072fed10b61 -r7e9f8031810508f9aebd79d8c838e268a1982051
--- arms/detail.html	(.../detail.html)	(revision 690aa9335c0406e42be0044d26a9f072fed10b61)
+++ arms/detail.html	(.../detail.html)	(revision 7e9f8031810508f9aebd79d8c838e268a1982051)
@@ -156,6 +156,11 @@
 	<script type="text/javascript" src="../arms/js/common/dwrChat.js" charset="utf-8"></script>
 	<script src="../reference/lightblue4/docs/lib/messenger/build/js/messenger.min.js" charset="utf-8"></script>
 
+    <!-- Ladda -->
+    <script type="text/javascript" src="../reference/jquery-plugins/Ladda-jQuery-0.6.0/dist/spin.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="../reference/jquery-plugins/Ladda-jQuery-0.6.0/js/ladda.js" charset="utf-8"></script>
+    <link rel="stylesheet" type="text/css" href="../reference/jquery-plugins/Ladda-jQuery-0.6.0/dist/ladda.min.css" media="screen" />
+
 	<!-- page interaction -->
 	<script type="text/javascript" src="../reference/jquery-plugins/topbar.js" charset="utf-8"></script>
 
Index: arms/index2.html
===================================================================
diff -u
--- arms/index2.html	(revision 0)
+++ arms/index2.html	(revision 7e9f8031810508f9aebd79d8c838e268a1982051)
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <link rel="stylesheet" href="css/index2.css" />
+</head>
+
+<body>
+<header>
+    <div>Animated Sections</div>
+
+    <div>
+        <a href="https://codepen.io/BrianCross/pen/PoWapLP"
+        >Original By Brian</a
+        >
+    </div>
+</header>
+
+<section class="first">
+    <div class="outer">
+        <div class="inner">
+            <div class="bg one">
+                <h2 class="section-heading">Scroll down</h2>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="second">
+    <div class="outer">
+        <div class="inner">
+            <div class="bg">
+                <h2 class="section-heading">Animated with GSAP</h2>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="third">
+    <div class="outer">
+        <div class="inner">
+            <div class="bg">
+                <h2 class="section-heading">GreenSock</h2>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="fourth">
+    <div class="outer">
+        <div class="inner">
+            <div class="bg">
+                <h2 class="section-heading">Animation platform</h2>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="fifth">
+    <div class="outer">
+        <div class="inner">
+            <div class="bg">
+                <h2 class="section-heading">Keep scrolling</h2>
+            </div>
+        </div>
+    </div>
+</section>
+
+<div class="section-scroll-dots-navigation">
+    <ul class="list list-unstyled">
+        <li class="dot">
+            <button type="button" class="btn"></button>
+        </li>
+
+        <li class="dot">
+            <button type="button" class="btn"></button>
+        </li>
+
+        <li class="dot">
+            <button type="button" class="btn"></button>
+        </li>
+
+        <li class="dot">
+            <button type="button" class="btn"></button>
+        </li>
+
+        <li class="dot">
+            <button type="button" class="btn"></button>
+        </li>
+    </ul>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Observer.min.js"></script>
+
+<script src="js/index2.js"></script>
+</body>
+</html>
Index: arms/js/index2.js
===================================================================
diff -u
--- arms/js/index2.js	(revision 0)
+++ arms/js/index2.js	(revision 7e9f8031810508f9aebd79d8c838e268a1982051)
@@ -0,0 +1,87 @@
+gsap.registerPlugin(Observer);
+
+const sections = document.querySelectorAll('section');
+const images = document.querySelectorAll('.bg');
+const dots = document.querySelectorAll('.dot');
+const outerWrappers = gsap.utils.toArray('.outer');
+const innerWrappers = gsap.utils.toArray('.inner');
+
+let animating;
+let currentIndex = -1;
+
+gsap.set(outerWrappers, { yPercent: 100 });
+gsap.set(innerWrappers, { yPercent: -100 });
+
+function gotoSection(index, direction) {
+    animating = true;
+
+    const fromTop = direction === -1;
+    const dFactor = fromTop ? -1 : 1;
+    const tl = gsap.timeline({
+        defaults: { duration: 1, ease: 'power1.inOut' },
+        onComplete: () => (animating = false),
+    });
+
+    if (currentIndex >= 0) {
+        gsap.set(sections[currentIndex], { zIndex: 0 });
+
+        tl.to(images[currentIndex], { yPercent: -15 * dFactor })
+            .set(sections[currentIndex], { autoAlpha: 0 })
+            .fromTo(
+                images[currentIndex],
+                { scale: 1, autoAlpha: 1 },
+                { scale: 0.5, autoAlpha: 0 },
+                0
+            );
+
+        dots[currentIndex].classList.remove('active');
+    }
+
+    gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });
+    gsap.set(images[index], { scale: 1, autoAlpha: 1 });
+
+    tl.fromTo(
+        [outerWrappers[index], innerWrappers[index]],
+        {
+            yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor),
+        },
+        {
+            yPercent: 0,
+        },
+        0
+    ).fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0);
+
+    dots[index].classList.add('active');
+
+    currentIndex = index;
+}
+
+Observer.create({
+    type: 'wheel,touch,pointer',
+    wheelSpeed: -1,
+    onDown: () => {
+        if (animating) return;
+        if (currentIndex - 1 < 0) return;
+
+        gotoSection(currentIndex - 1, -1);
+    },
+    onUp: () => {
+        if (animating) return;
+        if (currentIndex + 1 >= sections.length) return;
+
+        gotoSection(currentIndex + 1, 1);
+    },
+    tolerance: 10,
+    preventDefault: true,
+});
+
+[].forEach.call(document.querySelectorAll('.btn'), (btn, i) => {
+    btn.addEventListener('click', () =>
+        gotoSection(i, currentIndex > i ? -1 : 1)
+    );
+});
+
+gotoSection(0, 1);
+
+// original: https://codepen.io/BrianCross/pen/PoWapLP
+// horizontal version: https://codepen.io/GreenSock/pen/xxWdeMK