try now

animations.js

@@ -0,0 +1,82 @@
+var stage = 0
+$(document).ready(function () {
+        var up = document.getElementById("upload")
+        if (up != null) {up.addEventListener ("click", ButtonPress)}
+        var height1 = $("#eins").height ();
+        var height2 = $("#zwei").height ();
+        if (height1 < 300) {height1 += 550};
+        console.log (height1, height2);
+        $(window).scroll(function () {
+            var pos = $(this).scrollTop ();
+            if (stage ==1 && pos-200 >= height2) { moveBlobs (2050, 600, 2)}
+            else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
+            else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
+            else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
+        })
+}
+)
+
+function moveBlobs (t, r, to) {
+    var dur = 0.4
+    if (stage < to) {
+        $("#blobs").css ({
+            'animation': 'move-down-' + to +' ease-out '+dur+ 's'
+        })
+        $("#green").css ({
+            'animation': 'green-move-down-'+ to + ' ease-in '+dur+ 's'
+        })
+        $("#red").css ({
+            'animation': 'red-move-down-'+ to + ' ease-in '+dur+ 's'
+        })
+        $("#blue").css ({
+            'animation': 'blue-move-down-'+ to + ' ease-in '+dur+ 's'
+        })
+    }
+    else {
+        $("#blobs").css ({
+            'animation': 'move-down-' +(to+1)+ ' ease-out '+dur+'s reverse'
+        })
+        $("#green").css ({
+            'animation': 'green-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
+        })
+        $("#red").css ({
+            'animation': 'red-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
+        })
+        $("#blue").css ({
+            'animation': 'blue-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
+        })
+    }
+    setTimeout (function () {
+        $("#blobs").css ({
+            'top': t + 'px',
+            'right': r + 'px',
+            'animation': '',});
+        $("#green").css ({ 'animation': '' })
+        $("#blue").css ({ 'animation': '' })
+        $("#red").css ({ 'animation': '' })
+        stage = to;
+    }, (dur*1000)-1)
+} 
+
+function ButtonPress () {
+    document.body.style.cursor = "progress"
+    $("#upload").css ({
+        'cursor': 'not-allowed',
+        'animation': 'text-in-out 1s'
+    })
+    setTimeout (function () {
+        document.getElementById("upload").textContent = "Verarbeite..."
+        $("#upload").css ({
+            'padding-right': '140px',
+            'padding-left': '139px',
+            'padding-top': '80px',
+            'padding-bottom': '57px',
+        })
+    }, 500)
+    setTimeout (function() {
+        $("#upload").css ({
+            'animation': 'border-in-out 2s infinite'
+        })
+    }, 1000)
+}
+