Merge pull request #1742 from exadel-inc/epic/esl-animate-4.0.0

epic(esl-animate): final cleanup
exadel-inc · Jun 28, 2023 · 591ee3e · 591ee3e
2 parents c40d94e + 120c0c2
commit 591ee3e
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 60 deletions.
diff --git a/pages/src/common/simple-grid.less b/pages/src/common/simple-grid.less
@@ -1,20 +1,39 @@
+@import "./variables.less";
+
 .simple-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
+  --col-grid: 1;
+  @media @sm {
+    --col-grid: 2;
+  }
+  @media @md {
+    --col-grid: 3;
+  }
+  @media @lg {
+    --col-grid: 4;
+  }
+  @media @xl {
+    --col-grid: 5;
+  }
+
+  &-compact {
+    --col-grid: 1;
+    @media @md-xl {
+      --col-grid: 2;
+    }
+  }
+
+  &-list {
+    --col-grid: 1;
+  }
+
+  display: grid;
+  grid-template-columns: repeat(var(--col-grid), 1fr);
 
   margin: 30px 0;
-  padding: 20px;
+  gap: 30px;
 
   & > &-cell {
     list-style-type: none;
-    flex: 1 1 0px;
-    margin: 20px;
-    min-width: 200px;
-    height: 200px;
-  }
-
-  &-fw > &-cell {
-    flex: 1 1 100%;
+    min-height: 200px;
   }
 }
diff --git a/pages/views/_includes/landing/benefits.njk b/pages/views/_includes/landing/benefits.njk
@@ -3,7 +3,7 @@
   <esl-animate target="::next::child" group></esl-animate>
   <ul class="benefit-container">
     {% for item in landing.benefits.items %}
-      <li class="benefit-item esl-animate-slide-left">
+      <li class="benefit-item esl-animate-slide left">
         <div class="benefit-icon">
           {% include "static/assets/" + item.icon %}
         </div>

diff --git a/pages/views/_includes/landing/blogs.njk b/pages/views/_includes/landing/blogs.njk
@@ -6,7 +6,7 @@
   <esl-animate target="::next::child" group></esl-animate>
   <ul class="blogs-container">
     {% for item in releasedBlogs | reverse | limit(3) %}
-      <li class="blogs-item esl-animate-slide-left">
+      <li class="blogs-item esl-animate-slide left">
         <div class="blogs-content">
           <h4 class="blogs-content-name">{{ item.data.name }}</h4>
           <p class="blogs-content-text">{{ item.templateContent | text | truncate(250) }}</p>

diff --git a/pages/views/_includes/landing/promo-banner.njk b/pages/views/_includes/landing/promo-banner.njk
@@ -1,4 +1,4 @@
-<div class="promo-banner esl-animate-slide-up">
+<div class="promo-banner esl-animate-slide up">
   <esl-animate target="::parent"></esl-animate>
   <div class="promo-banner-content container">
     <h2 class="promo-banner-heading">{{ landing.promo.title }}</h2>

diff --git a/pages/views/components/esl-animate.njk b/pages/views/components/esl-animate.njk
@@ -3,7 +3,7 @@ layout: content
 title: ESL Animate & ESL Animate Service
 seoTitle: ESL Animate - service and component to animate element on viewport intersection
 name: ESL Animate
-tags: [components, beta]
+tags: [components]
 aside:
   examples:
     - animate

diff --git a/pages/views/examples/animate.njk b/pages/views/examples/animate.njk
@@ -2,7 +2,7 @@
 layout: content
 title: Animate
 name: Animate
-tags: [examples, beta]
+tags: [examples]
 icon: examples/animate.svg
 aside:
   components:
@@ -12,21 +12,21 @@ aside:
 <section>
   <h2>Simple animation</h2>
 
-  <div class="simple-grid simple-grid-fw">
+  <div class="simple-grid simple-grid-compact">
     {% for i in range(0, 2) -%}
-      <esl-animate repeat class="esl-animate-fade simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-fade simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-fade
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-up simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide up simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-up
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-left simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide left simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-left
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-down simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide down simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-down
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-right simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide right simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-right
       </esl-animate>
     {%- endfor %}
@@ -37,17 +37,21 @@ aside:
   <h2>Grouped and repetitive animation</h2>
   <ul class="round simple-grid">
     <esl-animate target="::parent::child(li)" group repeat></esl-animate>
-    {% for i in range(0, 36) -%}
-      <li class="bg-blue round esl-animate-slide-up simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
+    {% for i in range(0, 30) -%}
+      <li class="bg-blue round esl-animate-slide up simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
     {%- endfor %}
   </ul>
 </section>
 
 <section>
   <h2>Grouped animation with custom delay by mixin</h2>
+  <button class="btn btn-sec-orange"
+          onclick="[...document.querySelectorAll('[esl-animate].re-1')].forEach((el) => ESL.AnimateMixin.get(el).reanimate())">
+    Re-animate
+  </button>
   <ul class="round simple-grid">
-    {% for i in range(0, 36) -%}
-      <li class="bg-orange round esl-animate-slide-left simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
+    {% for i in range(0, 30) -%}
+      <li class="re-1 bg-orange round esl-animate-slide up left simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
           esl-animate="{group: true, groupDelay: 50}"></li>
     {%- endfor %}
   </ul>

diff --git a/src/modules/esl-animate/README.md b/src/modules/esl-animate/README.md
@@ -18,10 +18,10 @@ animated.
 - Automatic re-animation after the item exits the viewport area
 - Pre-defined CSS animations
   - `esl-animate-fade`
-  - `esl-animate-slide-left`
-  - `esl-animate-slide-right`
-  - `esl-animate-slide-up`
-  - `esl-animate-slide-down`
+  - `esl-animate-slide left`
+  - `esl-animate-slide right`
+  - `esl-animate-slide up`
+  - `esl-animate-slide down`
 
 ## `ESLAnimateService`
 

diff --git a/src/modules/esl-animate/core/esl-animate-animations.less b/src/modules/esl-animate/core/esl-animate-animations.less
@@ -6,42 +6,34 @@
   }
 }
 
-.esl-animate-slide-left {
-  opacity: 0;
-  transform: translateX(-30px);
-  &.in {
-    opacity: 1;
-    transform: translateX(0px);
-    transition: transform 1s, opacity 1s;
-  }
-}
+.esl-animate-slide {
+  --esl-animation-offset-x: 0;
+  --esl-animation-offset-y: 0;
 
-.esl-animate-slide-right {
   opacity: 0;
-  transform: translateX(30px);
-  &.in {
-    opacity: 1;
-    transform: translateX(0px);
-    transition: transform 1s, opacity 1s;
-  }
-}
+  transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
 
-.esl-animate-slide-up {
-  opacity: 0;
-  transform: translateY(30px);
   &.in {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translate3d(0, 0, 0);
     transition: transform 1s, opacity 1s;
   }
-}
+  &:not(.in) {
+    position: relative;
+    top: calc(~'-1 * var(--esl-animation-offset-y)');
+    left: calc(~'-1 * var(--esl-animation-offset-x)');
+  }
 
-.esl-animate-slide-down {
-  opacity: 0;
-  transform: translateY(-30px);
-  &.in {
-    opacity: 1;
-    transform: translateY(0px);
-    transition: transform 1s, opacity 1s;
+  &.up {
+    --esl-animation-offset-y: 30px;
+  }
+  &.down {
+    --esl-animation-offset-y: -30px;
+  }
+  &.left {
+    --esl-animation-offset-x: 30px;
+  }
+  &.right {
+    --esl-animation-offset-x: -30px;
   }
 }
diff --git a/src/modules/esl-animate/core/esl-animate-mixin.ts b/src/modules/esl-animate/core/esl-animate-mixin.ts
@@ -48,3 +48,9 @@ export class ESLAnimateMixin extends ESLMixinElement {
     ESLAnimateService.observe(this.$host, this.mergeDefaultParams());
   }
 }
+
+declare global {
+  export interface ESLLibrary {
+    AnimateMixin: typeof ESLAnimateMixin;
+  }
+}
diff --git a/src/modules/esl-animate/core/esl-animate-service.ts b/src/modules/esl-animate/core/esl-animate-service.ts
@@ -159,3 +159,9 @@ export class ESLAnimateService {
     if (config._unsubscribe) this.unobserve(item);
   }
 }
+
+declare global {
+  export interface ESLLibrary {
+    AnimateService: typeof ESLAnimateService;
+  }
+}
diff --git a/src/modules/esl-animate/core/esl-animate.ts b/src/modules/esl-animate/core/esl-animate.ts
@@ -95,3 +95,13 @@ export class ESLAnimate extends ESLBaseElement {
     });
   }
 }
+
+declare global {
+  export interface ESLLibrary {
+    Animate: typeof ESLAnimate;
+  }
+  export interface HTMLElementTagNameMap {
+    'esl-animate': ESLAnimate;
+  }
+}
+