eSales Media Git repositories
Browse code

Big fix for animations

Benjamin Roth authored on24/04/2020 19:38:44
Showing2 changed files
src/Resources/public/css/animate.scss
History View file @d4641dc
... ... 
@@ -29,7 +29,7 @@
29 29 
   }
30 30 
 }
31 31
32 
-.iss-animated {
32 
+.is-animated {
33 33 
   &:not(.rs-columns):not(.animate-children) {
34 34 
     > *:not(.rs-columns) {
35 35 
       .-in-view& {
... ... 
@@ -44,11 +44,11 @@
44 44 
   &:not(.rs-columns):not(.animate-children) {
45 45 
     > *.rs-columns {
46 46 
       > * {
47 
-        .-in-view& {
47 
+        &.-in-view {
48 48 
           @include animation-start;
49 49 
         }
50 50
51 
-        :not(.-in-view)& > * {
51 
+        &:not(.-in-view) {
52 52 
           @include animation-presets;
53 53 
         }
54 54 
       }
... ... 
@@ -58,11 +58,11 @@
58 58 
   &.rs-columns,
59 59 
   &.animate-children {
60 60 
     > * {
61 
-      .-in-view& {
61 
+      &.-in-view {
62 62 
         @include animation-start;
63 63 
       }
64 64
65 
-      :not(.-in-view)& {
65 
+      &:not(.-in-view) {
66 66 
         @include animation-presets;
67 67 
       }
68 68 
     }
src/Resources/public/js/inView_animate.js
History View file @d4641dc
... ... 
@@ -4,31 +4,31 @@
4 4 
     var rect = element.getBoundingClientRect();
5 5 
     if (
6 6 
       rect.top >= 0 &&
7 
-      rect.left >= 0 &&
7 
+      rect.left+rect.width/2 >= 0 &&
8 8 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) &&
9 
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth))
9 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
10 10 
     {
11 11 
       return 1;
12 12 
     } else if (
13 
-      rect.left >= 0 &&
13 
+      rect.left+rect.width/2 >= 0 &&
14 14 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
15 
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth))
15 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
16 16 
     {
17 17 
       return 2;
18 18 
     }
19 19 
     return false;
20 20 
   }
21 21
22 
-  //var elements = document.querySelectorAll(".is-animated:not(.rs-columns), .is-animated:not(.rs-columns) > .rs-columns > *, .is-animated.rs-columns > *");
23 22 
   function getAnimatedElements() {
24 
-    var animatedWrapper = document.querySelectorAll(".iss-animated"),
23 
+    var animatedWrapper = document.querySelectorAll(".is-animated"),
25 24 
       elements = [];
26 25
27 26 
     for (var i = 0; i < animatedWrapper.length; i++)
28 27 
     {
28 
+      var hasChildren = false;
29 29 
       if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children"))
30 30 
       {
31 
-        for (var j = 0; j < animatedWrapper[i].children[j].length; j++)
31 
+        for (var j = 0; j < animatedWrapper[i].children.length; j++)
32 32 
         {
33 33 
           elements.push(animatedWrapper[i].children[j]);
34 34 
         }
... ... 
@@ -41,10 +41,11 @@
41 41 
             for (var k = 0; k < animatedWrapper[i].children[j].children.length; k++)
42 42 
             {
43 43 
               elements.push(animatedWrapper[i].children[j].children[k]);
44 
+              hasChildren = true;
44 45 
             }
45 46 
           }
46 47 
         }
47 
-        if (!elements.length)
48 
+        if (!hasChildren)
48 49 
         {
49 50 
           elements.push(animatedWrapper[i]);
50 51 
         }
... ... 
@@ -63,10 +64,7 @@
63 64 
       {
64 65 
         if (hasDelay === 1)
65 66 
         {
66 
-          for (var j = 0; j < elements[i].children.length; j++)
67 
-          {
68 
-            elements[i].children[j].style.transitionDelay = delay + 'ms';
69 
-          }
67 
+          elements[i].style.transitionDelay = delay + 'ms';
70 68 
           delay = delay + 125;
71 69 
         }
72 70 
         elements[i].classList.add("-in-view");