animation-fix

blob-animation.js

@@ -1,21 +1,31 @@
+var stage = 0
 $(document).ready(function () {
-    var height1 = $("#eins").height ();
+        var height1 = $("#eins").height ();
         $(window).scroll(function () {
-            if (pos+600 >= height1){
-                $("#blobs").css ({
-                    'top': '1000px',
-                    'right': '1000px',
-                    /*'animation': 'move-down-1 5s'*/
-                })
-                $("blobs").animate ({'top': '1000px', 'right': '1000px'}, 5000)
-            } else {
-                $("#blobs").css ({
-                    'top': '0px',
-                    'right': '0px',
-                })
-                $("blobs").animate ({'top': '0px', 'right': '0px'}, 5000)
-            }
-            }
-        )
+            var pos = $(this).scrollTop ();
+            console.log (pos);
+            if (pos+600 >= height1 && stage == 0){ moveBlobs (1000, 1000, 1)}
+            else if (stage == 1 && pos < 400){ moveBlobs (0,0,0) }
+        })
+}
+)
+
+function moveBlobs (t, r, to) {
+    var dur = 0.7
+    if (stage < to) {
+        $("#blobs").css ({
+            'animation': 'move-down-'+ to + ' ease-in-out '+dur+ 's'
+        })
     }
-)
+    else {
+        $("#blobs").css ({
+            'animation': 'move-down-'+(to+1)+' ease-in-out '+dur+'s reverse'
+        })
+    }
+    setTimeout (function () {$("#blobs").css ({
+        'top': t + 'px',
+        'right': r + 'px',
+        'animation': '0',});
+        stage = to;
+    }, (dur*1000)-1)
+}